zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Text Popup bei ImageMaps?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.03.2008, 18:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.03.2008
Beiträge: 7
Manji befindet sich auf einem aufstrebenden Ast
Frage Text Popup bei ImageMaps?

So ich habe folgenden Code
Code:
<img src="Bilder/kartepelz.gif" width="593" height="457" border="0" usemap="#kartepelz_Map" />
<map name="kartepelz_Map">
<area shape="poly" alt="" coords="269,355, 316,307, 293,286, 289,286, 275,302" href="$link" />
<area shape="poly" alt="" coords="250,267, 247,294, 250,299, 259,302, 275,302, 289,286, 289,272, 279,267" href="$link" />
<area shape="poly" alt="" coords="230,349, 269,355, 269,333, 274,302, 259,302, 250,299, 247,294, 235,302, 228,349" href="$link" />
<area shape="poly" alt="frei" coords="96,72, 131,87, 136,86, 160,31, 121,9" href="http://www.eineseite.de" target="_self" />
</map>
Die das was in "alt=" steht wird aber leider nicht angezeigt. Nun hab ich folgendes gefunden und wollte fragen wie ich das in die area tags einbauen soll.

Hier der Link
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.03.2008, 11:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.03.2008
Beiträge: 7
Manji befindet sich auf einem aufstrebenden Ast
Standard

keiner ne idee?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.03.2008, 13:30
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.845
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Kenne mich mit ImageMaps nicht aus, aber Du kannst ja mal title anstelle von alt probieren.
Mit Zitat antworten
  #4 (permalink)  
Alt 28.03.2008, 13:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.03.2008
Beiträge: 7
Manji befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von mantiz Beitrag anzeigen
Kenne mich mit ImageMaps nicht aus, aber Du kannst ja mal title anstelle von alt probieren.
Oh ja danke das funzt!

Aber so popups wie im unteren Link würden eigentlich besser dazu passen da der Text in den alt oder title tags doch sehr klein ist.

Aber danke!
Mit Zitat antworten
  #5 (permalink)  
Alt 28.03.2008, 13:55
Benutzerbild von Timo
table-layout: none;
XHTMLforum-Kenner
 
Registriert seit: 11.11.2006
Beiträge: 5.354
Timo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein Lichtblick
Standard

Zitat:
Zitat von Manji Beitrag anzeigen
Aber so popups wie im unteren Link würden eigentlich besser dazu passen da der Text in den alt oder title tags doch sehr klein ist.
Dann machs doch so.

Oder an was scheiterst du?
Mach mal ein testcase und stells hier rein dann kann man noch helfen!
__________________
Um weitere Erklärungen eingeblendet zu bekommen, drücken Sie bitte die Tastenkombination Alt + F4
Mit Zitat antworten
  #6 (permalink)  
Alt 28.03.2008, 14:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.03.2008
Beiträge: 7
Manji befindet sich auf einem aufstrebenden Ast
Standard

Also ich habe oben den Code gepostet

Code:
<img src="Bilder/kartepelz.gif" width="593" height="457" border="0" usemap="#kartepelz_Map" />
<map name="kartepelz_Map">
<area shape="poly" title="Ist nicht frei" coords="269,355, 316,307, 293,286, 289,286, 275,302" href="$link" />
<area shape="poly" title="Ist frei" coords="250,267, 247,294, 250,299, 259,302, 275,302, 289,286, 289,272, 279,267" href="$link" />
<area shape="poly" title="Ist nicht frei" coords="230,349, 269,355, 269,333, 274,302, 259,302, 250,299, 247,294, 235,302, 228,349" href="$link" />
<area shape="poly" title="Ist frei" coords="96,72, 131,87, 136,86, 160,31, 121,9" href="http://www.eineseite.de" target="_self" />
</map>

Dann hab ich ein Tutorial für "CSS Image Maps With Pop-Up Tool Tips" gefunden.

Mein problem ist das dort die Koordinaten ganz anders gespeichert werden also so: (siehe map bunny)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>CSS Image Map</title>
	<style type="text/css">
		#map {
			margin:0;
			padding:0;
			width:400px;
			height:250px;
			background:url(map.jpg) top left no-repeat #fff;
			font-family:arial, helvetica, sans-serif;
			font-size:8pt;
		}
		
		#map li {
			margin:0;
			padding:0;
			list-style:none;
		}
		
		#map li a {
			position:absolute;
			display:block;
			/*
			   Specifying a background image
			   (a 1px by 1px transparent gif)
			   fixes a bug in older versions of
			   IE that causeses the block to not
			   render at its full dimensions.
			*/
   			background:url(blank.gif);
   			text-decoration:none;
			color:#000;
		}
		
		#map li a span { display:none; }
		
		#map li a:hover span {
			position:relative;
			display:block;
			width:200px;
			left:20px;
			top:20px;
			border:1px solid #000;
			background:#fff;
			padding:5px;
 			filter:alpha(opacity=80);
			opacity:0.8;
  		}
	
		#map a.bunny {
			top:20px;
			left:60px;
			width:80px;
			height:90px;
		}
		
		#map a.parrot {
			top:1px;
			left:275px;
			width:50px;
			height:50px;
		}
		
		#map a.snail {
			top:135px;
			left:30px;
			width:50px;
			height:50px;
		}
		
		#map a.dog {
			top:100px;
			left:150px;
			width:115px;
			height:95px;
		}
		
		#map a.cat {
			top:65px;
			left:315px;
			width:70px;
			height:120px;
		}
	</style>
</head>
<body>

<ul id="map">
	<li><a class="bunny" href="#" title="Bunny"><span><b>Bunny Rabbit</b><br>
		Cute and fuzzy, with long ears and a fluffy tail. this cuddly bunny 
		makes a great pet.</span></a></li>

	<li><a class="parrot" href="#" title="Parrot"><span><b>Parrot</b><br>
		With a lifespan of up to 40 years, these bright, colorful birds 
		are wonderful life-long pets. One of only a few birds
		capable of learning to speak, parrots are intelilgent and
		highly social animals.</span></a></li>
		
	<li><a class="snail" href="#" title="Snail"><span><b>Snail</b><br>
		Snails are a wonderful addition to any aquarium-- just make
		sure that its tank-mates aren't going to eat it! Snails say
		"Meow."</span></a></li>
		
	<li><a class="dog" href="#" title="Dog"><span><b>Dog</b><br>
		Man's best friend, a protector and commrade of humans for
		centuries, dogs are faithful, loyal and loving companions.
		</span></a></li>

		
	<li><a class="cat" href="#" title="Cat"><span><b>Cat</b><br>
		Another popular pet, these felines were once viewd as a
		sacred creature amont the ancient Egyptians. Independant,
		sociable, and with a rumbling purr, cats make wonderful
		pets.</span></a></li>
</ul>
</body>
</html>
Aber diese Koordinaten beziehen sich auf Rechtecke! Ich brauche aber Poly Koordinaten ( nur weiß ich nicht was man dann in CSS schreibt wenn man nicht Rechtecke wie bei bunny parrot etc hat sondern Polygone wie bei mir ganz oben. Ich weiß nicht wie ich das besser erklären soll sorry

Geändert von Manji (28.03.2008 um 14:23 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 28.03.2008, 14:21
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.845
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Soweit ich weiß geht das gar nicht.

Das sind auch 2 völlig verschiedene Techniken.

Was Du verlinkt hast sind ImageMaps mit CSS realisiert, Dein Code ist verwendet aber eine ImageMap per Markup.

Ich kann mich irren, aber ich habe noch nie gesehen, dass man eine ImageMap im Markup (also mit area ...) per CSS stylen kann, was nötig wäre, um z.B. die hover-Geschichte zu realisieren.

Entweder Du verabschiedest Dich von dem Wunsch unbedingt Polygone hovern zu wollen und machst es rein mit CSS, wie in dem von Dir verlinkten Beispiel, oder Du setzt Dich mit Javascript auseinander, womit man das wahrscheinlich realisieren könnte, aber dann halt auch nur läuft, wenn Javascript aktiv ist.

Eine andere Möglichkeit fällt mir dafür nicht ein, sorry.
Mit Zitat antworten
  #8 (permalink)  
Alt 28.03.2008, 14:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.03.2008
Beiträge: 7
Manji befindet sich auf einem aufstrebenden Ast
Standard

Also kann man per CSS keine Polygonförmige DInge auf einen Bild per Koordinaten festhalten?

Ich brauche unbedingt Polygone weil mit Rechtecke ist das nicht realisierbar!

Geändert von Manji (28.03.2008 um 14:34 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 28.03.2008, 14:38
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.845
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Wie gesagt: Nicht, dass ich wüsste.

Man kann auch nicht wirklich rechteckige Bereiche definieren, wo dann was passieren soll, außer man gibt im Markup ein Element an, welches man dann im CSS anspricht. Ein solches Element ist aber immer rechteckig.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.03.2008, 14:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.03.2008
Beiträge: 7
Manji befindet sich auf einem aufstrebenden Ast
Standard

Und das was in title steht kann man nicht irgendwie vergrößern oder so?

Code:
<img src="Bilder/kartepelz.gif" width="593" height="457" border="0" usemap="#kartepelz_Map" />
<map name="kartepelz_Map">
<area shape="poly" title="Ist nicht frei" coords="269,355, 316,307, 293,286, 289,286, 275,302" href="$link" />
<area shape="poly" title="Ist frei" coords="250,267, 247,294, 250,299, 259,302, 275,302, 289,286, 289,272, 279,267" href="$link" />
<area shape="poly" title="Ist nicht frei" coords="230,349, 269,355, 269,333, 274,302, 259,302, 250,299, 247,294, 235,302, 228,349" href="$link" />
<area shape="poly" title="Ist frei" coords="96,72, 131,87, 136,86, 160,31, 121,9" href="http://www.eineseite.de" target="_self" />
</map>
#

Also das "Ist frei" einfach größer dargestellt ist?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 21:52
Problem mit div und Höhe deep4 CSS 2 13.11.2007 21:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:27 Uhr.