[ERLEDIGT] Grafik mit MouseOver Text!?

ohnoitsroger · 17 Mai 2016

Hallo, brauch mal wieder Hilfe,...

Möchte auf meiner Website die Map überarbeiten. Bisher ist es eine einfach Datei mit Text darauf, will aber das man den Text nur sieht wenn man mit der Maus darüber ist (oder Finger wie auch immer) Habs mit Imagemapping probiert aber das ist nicht ganz das richtige...

Natürlich sollten die Stellen auch irgendwie markiert sein dass man weiss wohin man muss.

Die alte Map: http://onceafterdeath.com/onewebstatic/32f06568ed-OADMAP.png
Die Map ohne Text: http://onceafterdeath.com/OADmapblank.jpg

Vielleicht weiss ja jemand was ich meine und kann mir sagen was ich suchen oder verwenden muss...

Liebe Grüße

SpiceLab · 17 Mai 2016

Schau mal hier: http://www.cssplay.co.uk/menu/cssplay-imagemap-hover-v2.html

Der Mouseover-Text liesse sich entgegen dem Beispiel auch differenziert an unterschiedlichen Positionen einblenden.

Moderation: Von HTML nach CSS verschoben.

ohnoitsroger · 17 Mai 2016

Danke :)

Ich war eigentlich auf der suche nach etwas das ungefähr meinen Vorstellungen entspricht, aber das hats genau getroffen

Jetzt is halt die Frage ob ich das hin grieg,...
Und das mit den Aufleuchtenden Tieren wär perfekt (Also anstatt den Tieren halt png´s von den Standortnamen) und denn Hover Text für ne kleine Beschreibung...

Mal sehen ob ich nen Code dazu find und es schaffe...

Danke nochmal! :)

SpiceLab · 17 Mai 2016

Good luck :)

ohnoitsroger · 25 Mai 2016

Ich kapiers nicht, ich weiss das ich vor Jahren schon mal das selbe gemacht hab und es sehr schwer für mich war.
Jetzt hat mir eine Freundin noch Tipps gegeben und ich komm nicht weiter...

Hab mal angefange wegen den koordinaten und ein html imagemap gemacht aber das mit dem CSS kann ich einfach nicht, find auch keinen code der mir einleuchtet, auf jeder Seite seh ich nur 10.0000 alternativen die mich noch mehr verwirren....

Weiß jemand vlt den code so wie oben im beispiel (Nur hover bilder) und wo ich den dan hin packen muss!?

Liebe Grüße aus der Baumschule

SpiceLab · 25 Mai 2016

ohnoitsroger schrieb:
Weiß jemand vlt den code so wie oben im beispiel (Nur hover bilder) und wo ich den dan hin packen muss!?

Hast Du Dir nicht den Quellcode des empfohlenen Beispiels näher angeschaut? Darin findet sich doch alles, was Du wissen willst.

Auszug aus dem CSS für Bilder- u. Text-Hover:

CSS:

area:nth-of-type(1):hover ~ span:before {content:url(animalmap/monkeyPanel.png);}

area:nth-of-type(1):hover ~ span:after {content:"Monkeys are generally considered to be intelligent. Unlike apes, monkeys usually have tails.";}

ohnoitsroger · 25 Mai 2016

Funktioniert bei mir nicht, hab die koordinaten getauscht beim ersten, kann nur auf den link klicken, kein bild, kein text....

SpiceLab · 25 Mai 2016

ohnoitsroger schrieb:
Funktioniert bei mir nicht, hab die koordinaten getauscht beim ersten, kann nur auf den link klicken, kein bild, kein text....

Dann fehlt Dir offensichtlich noch das Hintergrundbild für .backer:

CSS:

.backer {display:block; width:750px; height:600px; background:url(/menu/animalmap/animalDefault.png); position:absolute; left:0; top:0; z-index:-1;}

Ansonsten das Ganze bitte mal online demonstrieren.

djheke · 25 Mai 2016

Vielleicht hilft dir diese Alternative weiter.
http://www.gipspferd.de/forumhilfe/karte/karte.html

Code:

<!DOCTYPE HTML>
<html>
<head>
<title>Karte</title>
<meta charset="utf-8">
<style type="text/css">

.karte {
position:relative;
width:80%;
margin:0 auto;
}

.karte a {
position:absolute;
width:20px;
height:20px;
background:#f00;
display:block;
text-decoration:none;
}

.karte b {
margin:-20px 0 0 20px;
padding:5px;
background:#333;
color:#fff;
float:left;
display:none;
}

.karte a:hover b,.karte a:focus b {
display:block;
}
.karte img {
width:100%;
display:block;
}

.karte #hast {
top:20%;
left:40%;
}
.karte #st {
top:40%;
left:20%;
}

</style>
</head>
<body>
<div class="karte">
<img src="karte.jpg" alt="karte">
<a id="hast" href="#"><b>Hauptstadt</b></a>
<a id="st" href="#"><b>Stadt</b></a>
</div>
</body>
</html>
{/code]

ohnoitsroger · 25 Mai 2016

@Spicelab Hihi ne des is da, die Hover Bilder laden nicht auch der text (vom original code) nicht :/

SpiceLab · 25 Mai 2016

ohnoitsroger schrieb:
Hihi ne des is da, die Hover Bilder laden nicht auch der text (vom original code) nicht :/

Ist das online verfügbar, um mal einen Blick darauf werfen zu können, denn irgendwo ist Dir ein Fehler unterlaufen.

Ansonsten bitte hier den vollständigen Code posten.

ohnoitsroger · 25 Mai 2016

djheke schrieb:

Vielleicht hilft dir diese Alternative weiter.
http://www.gipspferd.de/forumhilfe/karte/karte.html

Code:

<!DOCTYPE HTML>
<html>
<head>
<title>Karte</title>
<meta charset="utf-8">
<style type="text/css">

.karte {
position:relative;
width:80%;
margin:0 auto;
}

.karte a {
position:absolute;
width:20px;
height:20px;
background:#f00;
display:block;
text-decoration:none;
}

.karte b {
margin:-20px 0 0 20px;
padding:5px;
background:#333;
color:#fff;
float:left;
display:none;
}

.karte a:hover b,.karte a:focus b {
display:block;
}
.karte img {
width:100%;
display:block;
}

.karte #hast {
top:20%;
left:40%;
}
.karte #st {
top:40%;
left:20%;
}

</style>
</head>
<body>
<div class="karte">
<img src="karte.jpg" alt="karte">
<a id="hast" href="#"><b>Hauptstadt</b></a>
<a id="st" href="#"><b>Stadt</b></a>
</div>
</body>
</html>
{/code]

Wäre auch interessant, aber wills halt mit den Bildern und ohne die square markierung

Spicelab schrieb:
Ist das online verfügbar, um mal einen Blick darauf werfen zu können, denn irgendwo ist Dir ein Fehler unterlaufen.

Ansonsten bitte hier den vollständigen Code posten.

Hab noch nichts gespeichert, weiss ja nicht mal was von dem originalcode weck kann und was nicht, hab auch erst von dem "monkey" die koordinaten und den grafiklink ausgetauscht, kommen tut aber nichts auch nicht von den anderen stellen die vom originalcode noch drin sind, kann nur die links anklicken an den vorgegebenen koordinaten....

SpiceLab · 25 Mai 2016

ohnoitsroger schrieb:
Hab noch nichts gespeichert

Lokal ganz sicher. Also bitte den Quellcode in die Zwischenablage kopieren, und hier posten, damit wir mal vorwärts kommen.

djheke · 25 Mai 2016

Ja, ein Beispielcode wird wohl besser sein.

ohnoitsroger · 25 Mai 2016

HTML:

<img id="Image-Maps-Com-image-maps-2016-05-25-104549" src="http://onceafterdeath.com/Map/OADmappunktecoord.png" border="0" width="2008" height="1224" orgWidth="2008" orgHeight="1224" usemap="#image-maps-2016-05-25-104549" alt="" />
<map name="image-maps-2016-05-25-104549" id="ImageMapsCom-image-maps-2016-05-25-104549">
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="929,314,968,354" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/Gabyshaus.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="965,273,1004,313" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/Hauptstadt.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="874,318,913,358" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/2Kirche.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="991,305,1030,345" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/2diefestung.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="813,377,852,417" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/2Staudamm.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="1469,104,1508,144" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/2zweiterstutzpunkt.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="1122,729,1254,777" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/Absturz.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="592,457,724,575" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/derpass.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="1370,210,1416,245" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/DieBurg.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="917,370,963,405" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/DieHorde.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="1374,336,1485,371" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/DieHorde2.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="1691,29,1939,133" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/RichtungJanus.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="859,708,927,765" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/Stadt.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="656,279,724,336" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/treffpunkt.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="969,372,1162,586" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/Verschollen.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="764,869,805,906" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/Vorstatdhaus.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="458,395,499,432" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/zivilisation.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="72,1020,288,1156" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://onceafterdeath.com/Map/zumhafen.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-05-25-104549').src= 'http://www.image-maps.com/m/private/0/hp3rkr62ni8b5j7f16t73d4fd3_oadmappunktecoord.png';"  />
<area shape="rect" coords="2006,1222,2008,1224" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
</map>

So hab ichs vorher alternativ probiert wobei hier die "mouseover" bilder riesig waren ( hab versucht größe zu ändern aber vlt an der falschen stelle) und der hintergrund verschwand.....

SpiceLab · 25 Mai 2016

Und der CSS-Code?

ohnoitsroger · 25 Mai 2016

Das wäre dann der ganze code von der cssplay Seite, ich glaub dafür hat niemand von euch Zeit

SpiceLab · 25 Mai 2016

ohnoitsroger schrieb:
Das wäre dann der ganze code von der cssplay Seite, ich glaub dafür hat niemand von euch Zeit

Sorry, das ist definitiv nicht der (ganze) Code des CSSPlay-Demos!

U.a. werden die Hover-Bilder nicht mit JavaScript getauscht!

ohnoitsroger · 25 Mai 2016

Ich mein den quellcode nicht meinen html....
Is eh zu groß;

Hab ihn hier mal gespeichert: www.onceafterdeath.com/media/map.html

SpiceLab · 25 Mai 2016

Bei dieser Ansammlung von (Grundlagen)Fehlern wundert mich nichts mehr...

Schau Dir doch nur mal diese Zeile an:

HTML:

<area shape="http://en.wikipedia.org/wiki/Monkey" coords="929,314,968,354 /&gt;&lt;area shape=">

Und vergleich sie mit der Syntax des Originals:

HTML:

<area shape="poly" href="http://en.wikipedia.org/wiki/Monkey" coords="150,33,171,44,176,60,168,60,167,64,165,66,173,90,179,87,175,75,183,63,199,59,206,62,207,67,225,61,242,67,242,61,252,69,255,62,260,73,256,80,261,97,255,110,260,121,255,136,245,142,233,140,224,149,211,150,236,167,243,162,262,159,269,163,266,171,266,178,264,181,262,191,253,193,248,200,242,202,233,195,229,185,195,167,182,184,166,192,166,198,164,202,168,210,161,215,163,223,151,230,128,217,124,198,126,183,122,179,104,186,102,200,127,236,130,254,118,270,107,269,110,261,120,253,115,240,92,207,91,193,100,180,118,168,87,150,83,130,96,113,102,117,110,116,116,123,123,125,138,115,156,112,148,70,140,62,132,54,136,39," />

[ERLEDIGT] Grafik mit MouseOver Text!?

Mitglied

Mod | ZENmechanic

Mitglied

Mod | ZENmechanic

Mitglied

Mod | ZENmechanic

Mitglied

Mod | ZENmechanic

Aktives Mitglied

Mitglied

Mod | ZENmechanic

Mitglied

Mod | ZENmechanic

Aktives Mitglied

Mitglied

Mod | ZENmechanic

Mitglied

Mod | ZENmechanic

Mitglied

Mod | ZENmechanic