Mouseover?

Meisternuke · 26 Dezember 2012

Hallo erstmal,

ich möchte zu meinem geplanten Gameserver eine "Landing-Page" erstellen von wo aus man zu verschiedenen Orten weitergeleitet wird.
Ich habe auf der Homepage: Titel ein Bild welches per Area-Map checkt ob man mit der Maus über das entsprechende Feld navigiert.
Bisher sieht mein HTML code so aus:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Titel</title>



    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>

<body>
<body bgcolor="#000000">
<div style="position:absolute;margin:auto;width:100%;vertical-align:middle;text-align:center;">
    <img src="auswahl.png" alt="" usemap="#Map" border="0"  />
    <map name="Map" id="Map">
      <area shape="poly" coords="204,87,436,260,100,719,0,271,1,270,-2,268,-2,274,-2,275,-3,273" href="http://forum.samp-hunger-games.net" />
      <area shape="poly" coords="2,3,0,105,63,195,287,3" href="http://www.google.de"/>
      <area shape="poly" coords="212,81,309,3,419,3,616,105,648,195,535,321" href="samp://127.0.0.1:7777/" />
      <area shape="poly" coords="542,327,717,432,879,425,943,360,898,191,677,247,620,240" href="ts3server://176.57.128.20:5495/" />
      <area shape="poly" coords="717,442,892,434,955,507,758,652,728,659,694,570" href="http://www.youtube.com/user/SAMPHungerGames" />
      <area shape="poly" coords="571,695,664,673,709,439,536,335,447,471,408,529,427,640" href="https://www.facebook.com/SAMP.Hunger.Games" />
      <area shape="poly" coords="658,198,677,236,954,165,863,4" href="http://www.google.de" />
      <area shape="poly" coords="445,268,527,328,460,433,384,469,360,385" href="http://www.google.de" />
      <area shape="poly" coords="350,399,436,712,183,628" href="http://www.google.de" />
      <area shape="poly" coords="681,720,837,721,954,683,954,519" href="http://www.google.de" />
    </map>
</div>
</body>
</html>

Dies funktioniert soweit so gut!
Ich habe gesehen das man mit der Funktion "MouseOver" und "MouseOut" das Bild verändern kann, wenn man zb. gerade über dem "Bereich" ist!

Da haben wir das Problem, kann mir da jemand helfen, ich weiß nicht genau wie ich das anstellen soll.
Das "neue" Bild habe ich bereits erstellt, ein beispiel:

HTML:

      <area shape="poly"  coords="204,87,436,260,100,719,0,271,1,270,-2,268,-2,274,-2,275,-3,273"  href="http://forum.samp-hunger-games.net" />

soll bei Mouseover zu leave.png werden und bei mouseout wieder zu auswahl.png
Leave.png:

bodil · 26 Dezember 2012

Am einfachsten erstellst du für jede Mousover-Situation eine eigene Grafik, jeweils in der Größe der Originalgrafik. Das heißt für 10 Areas 10 Grafiken, in denen jeweils ein Bereich gehighlighted ist.
Bei einem Mousover über Bereich eins tauschst du jetzt in dem Bild, das deine Map benutzt die Bildquelle aus, statt des Originalbildes auswahl.png nutzt du dann auswahl1.png. Dafür gibst du dem Bild am besten eine id. (Hier wäre jetzt id="auswahl") Im head-Bereich kannst du hierfür einen Script-Bereich einbauen:

HTML:

<script>
function useImage(id) {
    var img = document.getElementById('auswahl');
    img.src = "auswahl" + id + ".png";
}
</script>

Die Areas rufen dann diese Funktion auf:

HTML:

    ...
   <area ... onmouseover='useimage("1")' onmouseout='useimage("")'>
   <area ... onmouseover='useimage("2")' onmouseout='useimage("")'>
   <area ... onmouseover='useimage("3")' onmouseout='useimage("")'>
    ...

Damit beim Laden der Bilder keine Verzögerungen entstehen, würde ich raten, sie alle zusätzlich in einem unsichtbaren Div auf der Seite unterzubringen, dann sind sie schon im Cache, wenn sie gebraucht werden.

BTW: du verwendest in den Coords negative Koordinaten. Deren Sinn erschließt sich mir nicht spontan. Ich wär mir da nicht so sicher, ob die Browser damit einheitlich umgehen und ob das zu reproduzierbaren Ergebnissen führt. Daher: besser korrigieren.

FoXMorayn · 26 Dezember 2012

das bild als background vom img mit map einbinden. das img dann durch transparente bilder mit leuchtender umrandung, nach der von bodil beschriebenen technik, ersetzen. die große transparente fläche verbraucht nahezu kein zusätzliches volumen.

Meisternuke · 27 Dezember 2012

hab mich mal rangesetzt... funktionieren tut es trotzdem nicht: Titel

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Titel</title>
    <script>
    function useImage(id) {
        var img = document.getElementById('auswahl');
        img.src = "auswahl" + id + ".png";
    }
    </script>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>

<body>
<body bgcolor="#000000">
<div style="position:absolute;margin:auto;width:100%;vertical-align:middle;text-align:center;">
    <img src="auswahl.png" alt="" usemap="#Map" border="0"  />
    <map name="Map" id="Map">
    <!--forum-->
    <area shape="poly" coords="204,87,436,260,100,719,0,271,1,270,-2,268,-2,274,-2,275,-3,273" href="http://forum.samp-hunger-games.net" onmouseover='useimage("1")' onmouseout='useimage("")' />
    <!--Leave-->
    <area shape="poly" coords="2,3,0,105,63,195,287,3" href="http://www.google.de" onmouseover='useimage("2")' onmouseout='useimage("")'/>
    <!--joinserver-->
    <area shape="poly" coords="212,81,309,3,419,3,616,105,648,195,535,321" href="samp://127.0.0.1:7777/" onmouseover='useimage("3")' onmouseout='useimage("")'/>
    <!--teamspeak-->
    <area shape="poly" coords="542,327,717,432,879,425,943,360,898,191,677,247,620,240" href="ts3server://176.57.128.20:5495/" onmouseover='useimage("4")' onmouseout='useimage("")'/>
    <!--youtube-->
    <area shape="poly" coords="717,442,892,434,955,507,758,652,728,659,694,570" href="http://www.youtube.com/user/SAMPHungerGames" onmouseover='useimage("5")' onmouseout='useimage("")'/>
    <!--facebook-->
    <area shape="poly" coords="571,695,664,673,709,439,536,335,447,471,408,529,427,640" href="https://www.facebook.com/SAMP.Hunger.Games" onmouseover='useimage("6")' onmouseout='useimage("")'/>
    <!--Donate-->
    <area shape="poly" coords="658,198,677,236,954,165,863,4" href="http://www.google.de" onmouseover='useimage("7")' onmouseout='useimage("")'/>
    <!--team-->
    <area shape="poly" coords="445,268,527,328,460,433,384,469,360,385" href="http://www.google.de" onmouseover='useimage("8")' onmouseout='useimage("")'/>
    <!--news-->
    <area shape="poly" coords="350,399,436,712,183,628" href="http://www.google.de" onmouseover='useimage("9")' onmouseout='useimage("")'/>
    <!--impressum-->    
    <area shape="poly" coords="681,720,837,721,954,683,954,519" href="http://www.google.de" onmouseover='useimage("10")' onmouseout='useimage("")'/>
    </map>
</div>
<div style="display:none">
<img src="auswahl1.png">
<img src="auswahl2.png">
<img src="auswahl3.png">
<img src="auswahl4.png">
<img src="auswahl5.png">
<img src="auswahl6.png">
<img src="auswahl7.png">
<img src="auswahl8.png">
<img src="auswahl9.png">
<img src="auswahl10.png">
</div>
</body>
</html>

Sempervivum · 27 Dezember 2012

Du musst dem img-Tag noch die ID "auswahl" geben.

FoXMorayn · 27 Dezember 2012

ReferenceError: useimage is not defined

groß und kleinschreibung ;)

Meisternuke · 27 Dezember 2012

könnt ihr mir den vollständigen code, welcher dann auch richtig funktioniert bitte mal posten.. komm echt nicht weiter -.-
wie gesagt .. richtiger anfänger
hab das mit groß und klein geändert:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Titel</title>
    <script>
    function useimage(id) {
        var img = document.getElementById('auswahl');
        img.src = "auswahl" + id + ".png";
    }
    </script>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>

<body>
<body bgcolor="#000000">
<div style="position:absolute;margin:auto;width:100%;vertical-align:middle;text-align:center;">
    <img src="auswahl.png" alt="" usemap="#Map" border="0"  />
    <map name="Map" id="Map">
    <!--forum-->
    <area shape="poly" coords="204,87,436,260,100,719,0,271,1,270,-2,268,-2,274,-2,275,-3,273" href="http://forum.samp-hunger-games.net" onmouseover='useimage("1")' onmouseout='useimage("")' />
    <!--Leave-->
    <area shape="poly" coords="2,3,0,105,63,195,287,3" href="http://www.google.de" onmouseover='useimage("2")' onmouseout='useimage("")'/>
    <!--joinserver-->
    <area shape="poly" coords="212,81,309,3,419,3,616,105,648,195,535,321" href="samp://127.0.0.1:7777/" onmouseover='useimage("3")' onmouseout='useimage("")'/>
    <!--teamspeak-->
    <area shape="poly" coords="542,327,717,432,879,425,943,360,898,191,677,247,620,240" href="ts3server://176.57.128.20:5495/" onmouseover='useimage("4")' onmouseout='useimage("")'/>
    <!--youtube-->
    <area shape="poly" coords="717,442,892,434,955,507,758,652,728,659,694,570" href="http://www.youtube.com/user/SAMPHungerGames" onmouseover='useimage("5")' onmouseout='useimage("")'/>
    <!--facebook-->
    <area shape="poly" coords="571,695,664,673,709,439,536,335,447,471,408,529,427,640" href="https://www.facebook.com/SAMP.Hunger.Games" onmouseover='useimage("6")' onmouseout='useimage("")'/>
    <!--Donate-->
    <area shape="poly" coords="658,198,677,236,954,165,863,4" href="http://www.google.de" onmouseover='useimage("7")' onmouseout='useimage("")'/>
    <!--team-->
    <area shape="poly" coords="445,268,527,328,460,433,384,469,360,385" href="http://www.google.de" onmouseover='useimage("8")' onmouseout='useimage("")'/>
    <!--news-->
    <area shape="poly" coords="350,399,436,712,183,628" href="http://www.google.de" onmouseover='useimage("9")' onmouseout='useimage("")'/>
    <!--impressum-->    
    <area shape="poly" coords="681,720,837,721,954,683,954,519" href="http://www.google.de" onmouseover='useimage("10")' onmouseout='useimage("")'/>
    </map>
</div>
<div style="display:none">
<img src="auswahl1.png">
<img src="auswahl2.png">
<img src="auswahl3.png">
<img src="auswahl4.png">
<img src="auswahl5.png">
<img src="auswahl6.png">
<img src="auswahl7.png">
<img src="auswahl8.png">
<img src="auswahl9.png">
<img src="auswahl10.png">
</div>
</body>
</html>

funkt trotzdem nicht: http://www.samp-hunger-games.net

bdt600 · 27 Dezember 2012

FoXMorayn schrieb:
groß und kleinschreibung ;)

Code:

function useImage(id)

Code:

onmouseover='useimage("2")

Damit sollte ein Anfänger eigentlich klar kommen!

Meisternuke · 27 Dezember 2012

das hab ich ja ersetzt.. woran liegt es denn jetzt noch?

bdt600 · 27 Dezember 2012

Fehler: TypeError: img is null
Quelldatei: http://www.samp-hunger-games.net/
Zeile: 9

Code:

var img = document.getElementById('auswahl');

Es gibt kein Element mit der Id auswahl

Meisternuke · 27 Dezember 2012

wenn du mir jetzt auch noch erklärst was ich wie und warum ändern soll, wäre mir geholfen

threadi · 27 Dezember 2012

Meisternuke schrieb:
wenn du mir jetzt auch noch erklärst was ich wie ..

Siehe:

Sempervivum schrieb:
Du musst dem img-Tag noch die ID "auswahl" geben.

Meisternuke schrieb:
.. und warum ändern soll, wäre mir geholfen

Damit das JavaScript überhaupt auf das img-Element zugreifen kann.

Tipp:

HTML:

<img src="bild.jpg" id="auswahl" alt="">

Meisternuke · 27 Dezember 2012

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Titel</title>
    <script>
    function useimage(id) 
    {
        var img = document.getElementById('auswahl');
        img.src = "auswahl" + id + ".png";
    }
    </script>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>

<body>
<body bgcolor="#000000">
<div style="position:absolute;margin:auto;width:100%;vertical-align:middle;text-align:center;">
    <img src="auswahl.png" alt="" usemap="#Map" border="0"  />
    <map name="Map" id="Map">
    <!--forum-->
    <area shape="poly" coords="204,87,436,260,100,719,0,271,1,270,-2,268,-2,274,-2,275,-3,273" href="http://forum.samp-hunger-games.net" onmouseover='useimage("1")' onmouseout='useimage("")' />
    <!--Leave-->
    <area shape="poly" coords="2,3,0,105,63,195,287,3" href="http://www.google.de" onmouseover='useimage("2")' onmouseout='useimage("")'/>
    <!--joinserver-->
    <area shape="poly" coords="212,81,309,3,419,3,616,105,648,195,535,321" href="samp://127.0.0.1:7777/" onmouseover='useimage("3")' onmouseout='useimage("")'/>
    <!--teamspeak-->
    <area shape="poly" coords="542,327,717,432,879,425,943,360,898,191,677,247,620,240" href="ts3server://176.57.128.20:5495/" onmouseover='useimage("4")' onmouseout='useimage("")'/>
    <!--youtube-->
    <area shape="poly" coords="717,442,892,434,955,507,758,652,728,659,694,570" href="http://www.youtube.com/user/SAMPHungerGames" onmouseover='useimage("5")' onmouseout='useimage("")'/>
    <!--facebook-->
    <area shape="poly" coords="571,695,664,673,709,439,536,335,447,471,408,529,427,640" href="https://www.facebook.com/SAMP.Hunger.Games" onmouseover='useimage("6")' onmouseout='useimage("")'/>
    <!--Donate-->
    <area shape="poly" coords="658,198,677,236,954,165,863,4" href="http://www.google.de" onmouseover='useimage("7")' onmouseout='useimage("")'/>
    <!--team-->
    <area shape="poly" coords="445,268,527,328,460,433,384,469,360,385" href="http://www.google.de" onmouseover='useimage("8")' onmouseout='useimage("")'/>
    <!--news-->
    <area shape="poly" coords="350,399,436,712,183,628" href="http://www.google.de" onmouseover='useimage("9")' onmouseout='useimage("")'/>
    <!--impressum-->    
    <area shape="poly" coords="681,720,837,721,954,683,954,519" href="http://www.google.de" onmouseover='useimage("10")' onmouseout='useimage("")'/>
    </map>
</div>
<div style="display:none">
<img src="auswahl1.png" id="auswahl" alt="">
<img src="auswahl2.png" id="auswahl" alt="">
<img src="auswahl3.png" id="auswahl" alt="">
<img src="auswahl4.png" id="auswahl" alt="">
<img src="auswahl5.png" id="auswahl" alt="">
<img src="auswahl6.png" id="auswahl" alt="">
<img src="auswahl7.png" id="auswahl" alt="">
<img src="auswahl8.png" id="auswahl" alt="">
<img src="auswahl9.png" id="auswahl" alt="">
<img src="auswahl10.png" id="auswahl" alt="">
</div>
</body>
</html>

threadi · 28 Dezember 2012

Nein, so nicht. Wenn Du dich informiert hättest, wüsstest Du das eine ID nur 1 Mal pro HTML-Dokument verwendet werden darf. Außerdem bezieht sich dein JavaScript-Code auf das einzige img-Element dem Du aktuell keine ID gegeben hast. Bei allen anderen muss es weg.

Meisternuke · 28 Dezember 2012

jetzt hab ichs gerafft...
ich brauchte ja nur dem bild also dem auswahl.png die id geben...

<img src="auswahl.png" id="auswahl" alt="" usemap="#Map" border="0" />

Titel

bei mir ist jetzt grad so, da ich eine kleine auflößung auf meinem laptop habe muss ich immer rauszoomen damit ich das ganze bild sehe!
Gibt es eine möglichkeit dies so anzupassen, dass das Bild immer zum Browserfenster zuge"schnitten" wird?

bodil · 28 Dezember 2012

Bilder skalieren geht immer, aber die Image-Map mitzuskalieren ist nicht so ganz trivial.

Meisternuke · 28 Dezember 2012

kay dann werde ich damit so leben wie es jetzt gerade ist.. danke!

Mouseover?

Meisternuke

Neues Mitglied

bodil

Mitglied

FoXMorayn

Guest

Meisternuke

Neues Mitglied

Sempervivum

Guest

FoXMorayn

Guest

Meisternuke

Neues Mitglied

bdt600

Guest

Meisternuke

Neues Mitglied

bdt600

Guest

Meisternuke

Neues Mitglied

threadi

Moderator

Meisternuke

Neues Mitglied

threadi

Moderator

Meisternuke

Neues Mitglied

bodil

Mitglied

Meisternuke

Neues Mitglied

Neueste Beiträge