imagemap und moseover Effekt

mikemike · 29.03.2012

Moin moin,

ich habe mit einem imagemap Generator mir per Polygon aus einem Bild Coordinaten berechnen lassen um dann mit mouseover das Bild zu tauschen. Ich möchte aber auch dass man auf dieses getauschte Bild klicken kann um auf eine neue html Seite zu kommen. Kann mi hier vielleicht jemand auf die Sprünge helfen. Ich bekomme es einfach nicht hin.

Gruß
mikemike

Duddle · 29.03.2012

AW: imagemap und moseover Effekt

Ein einfaches href="bla.html" in den area-tags sollte doch funktionieren, vermute ich mal. Hast du das schon probiert? Wenn ja, könntest du mglw. nen Codeausschnitt zeigen?

Duddle

mikemike · 29.03.2012

AW: imagemap und moseover Effekt

Ich glaube das Problem ist die Vermischung zwischen imagemap und dem normalen mouseover Effekt.
Hier der code:

<map name="imagemap">
<area onMouseOver="d(this)" onMouseOut="e(this)" shape="poly" coords="634,222,628,211,617,220,611,220,611" href="./images/maps/anim/bay.png" title="Bayern">

</map><img src="./images/maps/anim/brd01.png" width="480" height="649" alt="" usemap="#imagemap">

Die Coordinaten habe ich mal ein wenig beschnitten.

Gruß
Olaf

mikemike · 29.03.2012

AW: imagemap und moseover Effekt

Wenn ich bei nachfolgendem Code statt "area" "img" nehme, dann wechselt das Bild. Aber leider nicht in den Coordinaten sonder selbst wenn ich den nördlichsten Zipfel streife wird es getauscht.

<map name="imagemap">
<area onMouseOver="(src='./images/maps/anim/bay.png')" onMouseOut="(src='./images/maps/anim/bay.png')" shape="rect" coords="217,399,363,615" href="./friedberg.html" title="Bayern">

</map><img src="./images/maps/anim/brd01.png" width="480" height="649" alt="" usemap="#imagemap">

?? Olaf

Duddle · 29.03.2012

AW: imagemap und moseover Effekt

Folgende Variante funktioniert wie erwartet:

HTML:

	    <map name="imagemap">
		<area onMouseOut="document.getElementById('i').src = 'img/1.png'" onMouseOver="document.getElementById('i').src = 'img/1_bw.png'" shape="rect" coords="0,0,50,50" href="./friedberg.html" title="Bayern">
	    </map>
	    <img src="img/1.png" id="i" usemap="#imagemap" />

Ausgelagert in eine Funktion gibt es auch keine Probleme:

HTML:

	    <script type="text/javascript" language="javascript" charset="utf-8">
		function set(url) {
		    document.getElementById('i').src = url;
		}
	    </script>
	    <map name="imagemap">
		<area onMouseOut="set('img/1.png')" onMouseOver="set('img/1_bw.png')" shape="rect" coords="0,0,50,50" href="./friedberg.html" title="Bayern">
	    </map>
	    <img src="img/1.png" id="i" usemap="#imagemap" />

(auch kein Unterschied bei poly statt rect im <area>)

Dein Fehler liegt daher wahrscheinlich in d() oder e().

Duddle

mikemike · 30.03.2012

AW: imagemap und moseover Effekt

@Duddle

Danke, es funktioniert. Ich habe Deinen ersten Vorschlag getestet und den habe ich direkt zum laufen gebracht.
Wie ich sehe, war ich komplett auf dem falschen Weg.
Gruß
mikemike

mikemike · 04.04.2012

Bild wechseln mit CSS

Ich habe ein image map mit verschiedenen Bildern was zwar funktionierte, aber aufgrund der zu großen Bilder fürs Web nicht so funktionell war.
Jetzt versuche ich das Ganze mit CSS zu lösen, aber irgendwie ist der Wurm drin. Entweder habe ich das Hintergrundbild oder ich bekomme die Ausschnitte. Aber ich möchte das das Hintergrundbild bestehen bleibt und beim „mouseover“ das dazugehörige Bild darüber geladen wird.

Die Beispiel-Seite habe ich auf http://www.bernhardtcc.de
Hat jemand eine Idee was ich verändern muss?
mikemike

ingvar · 04.04.2012

AW: Bild wechseln mit CSS

du kannst dir doch mit rechsklick die page herunterladen, mit dreamweaver aufmachen und dann wird dir der bereich angezeigt welcher mit dem mousover per css seinen style bekommen hat:

HTML:

<div id="bay"><area onMouseOut="document.getElementById('i').src = 'images/pzl_brd.png'" onMouseOver="document.getElementById('i').src = './images/xxx.png'" shape="poly" coords="175,340,214,310,234,340,282,320,355,418,330,458,329,485,226,501,211,487,230,417,196,352,196,352,175,341" target="_blank" href="https://www.google.de/" title="Bayern">
                </div></div>

mikemike · 04.04.2012

AW: Bild wechseln mit CSS

Die Beispiel Seite habe ich doch selber mit Dreamwaever gemacht.

Ich glaube da hast Du mich falsch verstanden.

Ich habe im css das Bild "brd". Das möchte ich als Hintergrundbild verstandem haben. Die weiteren Bilder sollen nur dann sich über das "brd" Bild legen wenn man mit der Maus über den dafür codierten Bereich fährt.

Nur leider verschwindet dann immer das Hintergundbild.

mikemike

syrap · 04.04.2012

AW: Bild wechseln mit CSS

Haste es schon mal mit nem z-index versucht?

syrap · 04.04.2012

AW: Bild wechseln mit CSS

ach, ich seh grad, dein javascript is schon falsch, du ersetzt jedes mal bei nem mouseover dein "hauptbild" mit dem anderen bild, so kann das auch nich funktionieren, leg die anderen bilder mit divs in die htmldatei (visibile:none

positionier die richtig und bei nem mouseover über die area dann visible:block.
So müsste das funktionieren

simonpicos · 04.04.2012

AW: Bild wechseln mit CSS

syrap schrieb:
(visibile:none [...] visible:block.

Sorry, bevor du irgendwelchen Müll von dir gibst, lass es lieber..

http://www.css4you.de/visibility.html

http://www.css4you.de/display.html

syrap · 04.04.2012

AW: Bild wechseln mit CSS

Ohh entschuldigung grosser Meister das ich ein Wort verwechselt habe...

simonpicos · 04.04.2012

AW: Bild wechseln mit CSS

syrap schrieb:
grosser Meister

Danke, auf den Titel verzichte ich

Sorry, wenn ich mich etwas hart ausgedrückt habe, aber wenn du mal meine Links verfolgst wirst du feststellen, dass die Eigenschaft visibility weder die werte none noch block haben kann..

Solche posts verwirren nur..

syrap · 04.04.2012

AW: Bild wechseln mit CSS

deswegen meinte ich das ich ein wort verwechselt habe, ich meinte natürlich display

cebito · 04.04.2012

AW: Bild wechseln mit CSS

syrap schrieb:
deswegen meinte ich das ich ein wort verwechselt habe, ich meinte natürlich display

Dann wäre es aber auch eine Alternative seinen Post einfach zu editieren und richtig zu stellen, statt den TE mit OT-Antworten noch mehr zu verwirren

syrap · 04.04.2012

AW: Bild wechseln mit CSS

Da hast du recht, allerdings habe ich das erst gesehen , wie du mich so freundlich darauf hingewiesen hast

mikemike · 05.04.2012

AW: Bild wechseln mit CSS

Danke für die rege Teilnahme.
Sind zwar einige Kommentare gekommen aber ich finde meine Lösung nicht so direkt dort drin.
Kann mir jemand anhand des BSP eine Korrektur machen?

HTML:

<map name="imagemap">
        <div id="rhe"><area onMouseOut="document.getElementById('i').src = './images/pzl_brd.png'" onMouseOver="document.getElementById('i').src = './images/zzz.png'" shape="poly" coords="360"  title=""></div>

syrap · 05.04.2012

AW: Bild wechseln mit CSS

so würde es gehen, ich habe es allerdings nur mit einem Bundesland gemacht.

HTML:

<html>
<head>
<style type="text/css">

    #bay
    {
    display:none;
    width:460px;
    height:550px;    
    position:absolute;
    top:10px;
    background-image:url("/bay.png");
    background-repeat:no-repeat;   
    }
    
   
</style>


</head>
<body>

<div id="teste">

<img src="brd.png" name="karte" usemap="#karte"/>
<div id="bay" onmouseover="changevisible('bay',1);" onmouseout="changevisible('bay',2);">&nbsp;</div>
<map name="karte" style="display:block;">

<area shape="poly" href="test.asp" alt="bay" onmouseover="changevisible('bay',1);" onmouseout="changevisible('bay',2);" coords="175,340,214,310,234,340,282,320,355,418,330,458,329,485,226,501,211,487,230,417,196,352,196,352,175,341" >

<map name="imagemap">
        
</map>

<script type="text/javascript">
    function changevisible(land,display) {

        if (display == "1" ) {
            
                document.getElementById(land).style.display = "block"; 
               }
               else {
                 document.getElementById(land).style.display = "none"; 
               }
           
    }
</script>


</div>



</body>
</html>

mikemike · 05.04.2012

AW: Bild wechseln mit CSS

Danke für die Mühe.
Leider bekomme ich es nicht zum laufen.

mikemike