Antworten auf deine Fragen:
Neues Thema erstellen

imagemap und moseover Effekt

mikemike

Nicht mehr ganz neu hier

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

Posting-Frequenz: 14µHz

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

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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

Posting-Frequenz: 14µHz

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

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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

Aktives Mitglied

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>
 
Zuletzt bearbeitet von einem Moderator:

mikemike

Nicht mehr ganz neu hier

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

Noch nicht viel geschrieben

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
 

syrap

Noch nicht viel geschrieben

AW: Bild wechseln mit CSS

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

syrap

Noch nicht viel geschrieben

AW: Bild wechseln mit CSS

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

mikemike

Nicht mehr ganz neu hier

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>
 
Zuletzt bearbeitet:

syrap

Noch nicht viel geschrieben

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>
 
Zuletzt bearbeitet von einem Moderator:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben