HTML Image Maps mit Mouseover effekt

Scari36 · 2. Februar 2010

Hallo,

Ich habe folgendes Problem zum Thema Image Map:
Ich möchte gerne dass wenn man mit der Maus über eine bestimmten Stelle der Image Map fährt, ein Bild geöffnet wird... Aber das Bilder sollte per Mouseover Geöffnet werden, Sprich: Man soll nicht raufklicken müssen, sondern einfach nur mit der Maus rüberfahren... Kann mir jemand weiterhelfen? Vielleicht kennt jemand einen HTML befehl oder ähnliches dafür. (solange es ein kompletter befehl ist kann es gegebenenfalls auch Javascript sein)

danke im voraus.

Ergänzung (2. Februar 2010)

achja, bevor ich es vergesse... ich habe es bei dem oberstem bild mit mouseover versucht... es hat nicht geklappt... und deswegen schreibe ich hier mal falls es von nutzen ist meinen html code hin, mit dem ich die image map erstellen wollte.

<html>
<head>
<title>Alsius Karte</title>
</head>
<body>

<h1>Alsius Map</h1>
<p>

<map name="AlsiusMap">

<area shape="rect" coords="480,115,508,134"
href="#" onMouseover="Tip('Skolheim-Hafen<img src=\'http://www.14mb.de/u/regnumdownloads/Gefrorener_See.jpg\' width=\'300' height=\'225\'>')" onMouseput="UnTip()" alt="" />

<area shape="rect" coords="304,270,335,302"
href="Rottersvall.jpg" alt="Rottersvall" title="Rottersvall">

<area shape="rect" coords="317,474,383,513"
href="Mont 1.png" alt="Montsognir" title="Montsognir">

<area shape="rect" coords="24,762,64,814"
href="Gok.png" alt="Gokstad" title="Gokstad">

<area shape="rect" coords="423,750,462,804"
href="Birka.png" alt="Birka" title="Birka">

<area shape="rect" coords="715,495,755,536"
href="hopstad.png" alt="Hopstad" title="Hopstad">

<area shape="rect" coords="324,425,339,444"
href="Herulf hang 3.png" alt="Herulf Hang" title="Herulf Hang">
<img src="http://www.14mb.de/u/regnumdownloads/Gefrorener_See.jpg" border="0" alt="Karte" usemap="#AlsiusMap">
</map>
</p>

</body>
</html>

TiME-SPLiNTER · 2. Februar 2010

Naja du musst z.B. hier:

Code:

<area shape="rect" coords="715,495,755,536"
href="hopstad.png" alt="Hopstad" title="Hopstad">

Ändern nach:

Code:

<area shape="rect" coords="715,495,755,536"
href="hopstad.png" alt="Hopstad" title="Hopstad" onmouseover="show('hopstad.png');" onmouseout="unshow();">

Und dann musst du eine JavaScript-Funktion schreiben:

Code:

function show(showpic) {
    $('bilddiv').display = 'block';
    $('bilddiv').innerHTML = '<img src="images/' + showpic + '" alt="Bild" />';
}

function unshow() {
   $('bilddiv').display = 'none';
}

Das ist's natürlich nur mal grundlegend. Wenn du den Div in der Nähe des Mauszeigers haben möchtest. Musst du noch die Mauszeigerposition auslesen und den Div dann absolute mit den Koordinaten in der JS-Funktion show() platzieren.

(Das du Javascript so vereinfacht schreiben kannst brauchst du Prototype (JS).

Scari36 · 2. Februar 2010

jetz sieht das bei mir folgendermassen aus,

<html>
<head>
<title>Alsius Karte</title>
</head>
<body>function show(showpic) {
$('bilddiv').display = 'block';
$('bilddiv').innerHTML = '<img src="images/' + showpic + '" alt="Bild" />';
}

function unshow() {
$('bilddiv').display = 'none';
}

<h1>Alsius Map</h1>
<p>

<map name="AlsiusMap">

<area shape="rect" coords="480,115,508,134"
href="#" onMouseover="Tip('Skolheim-Hafen<img src=\'http://www.14mb.de/u/regnumdownloads/Gefrorener_See.jpg\' width=\'300' height=\'225\'>')" onMouseput="UnTip()" alt="" />

<area shape="rect" coords="304,270,335,302"
href="Rottersvall.jpg" alt="Rottersvall" title="Rottersvall">

<area shape="rect" coords="317,474,383,513"
href="Mont 1.png" alt="Montsognir" title="Montsognir">

<area shape="rect" coords="24,762,64,814"
href="Gok.png" alt="Gokstad" title="Gokstad">

<area shape="rect" coords="423,750,462,804"
href="Birka.png" alt="Birka" title="Birka">

<area shape="rect" coords="715,495,755,536"
href="hopstad.png" alt="Hopstad" title="Hopstad" onmouseover="show('hopstad.png');" onmouseout="unshow();">

<area shape="rect" coords="324,425,339,444"
href="Herulf hang 3.png" alt="Herulf Hang" title="Herulf Hang">
<img src="alsius leere card.jpg" border="0" alt="Karte" usemap="#AlsiusMap">
</map>
</p>

</body>
</html>

(es klappt immernoch nicht.)
Also, ich habe ja am anfang geschrieben dass es unter Umständen auch Javascript sein kann... Ich denke ich kenne mich mit Javascript docgh ein bisschen viel zu wenig aus

von daher frage ich jetzt euch jetzt mal ob das auch komplett in HTML möglich ist? und wenn ja wie?

1668mib · 2. Februar 2010

Naja es würde wohl schon mal helfen, wenn man den JavaScript-Code über entsprechende Tags auch als solche markiert...

Das hat dann auch weniger mit höheren JavaScript-Kenntnissen zu tun sondern sollte einem eigentlich schon bekannt sein wenn man sich "nur" mit HTML beschäftigt...

http://de.selfhtml.org/javascript/intro.htm

TiME-SPLiNTER · 2. Februar 2010

Oke ich sehe du hast überhaupt keine Ahnung von Javascript... das war eigentlich mehr ein Denkanstoss und nicht gedacht um gleich zu verwenden.

Code:

<html>
<head>
<title>Alsius Karte</title>

<script type="text/javascript">
function show(showpic) {
$('bilddiv').display = 'block';
$('bilddiv').innerHTML = '<img src="images/' + showpic + '" alt="Bild" />';
}

function unshow() {
$('bilddiv').display = 'none';
}
</script>
</head>
<body>
<h1>Alsius Map</h1>
<p>

<map name="AlsiusMap">

<area shape="rect" coords="480,115,508,134" href="#" alt="" />

<area shape="rect" coords="304,270,335,302"
href="Rottersvall.jpg" alt="Rottersvall" title="Rottersvall">

<area shape="rect" coords="317,474,383,513"
href="Mont 1.png" alt="Montsognir" title="Montsognir">

<area shape="rect" coords="24,762,64,814"
href="Gok.png" alt="Gokstad" title="Gokstad">

<area shape="rect" coords="423,750,462,804"
href="Birka.png" alt="Birka" title="Birka">

<area shape="rect" coords="715,495,755,536"
href="hopstad.png" alt="Hopstad" title="Hopstad" onmouseover="show('hopstad.png');" onmouseout="unshow();">

<area shape="rect" coords="324,425,339,444"
href="Herulf hang 3.png" alt="Herulf Hang" title="Herulf Hang">
<img src="alsius leere card.jpg" border="0" alt="Karte" usemap="#AlsiusMap">
</map>
</p>

<div id="bilddiv" style="display:none;">hier das bild</div>

</body>
</html>

Dann brauchst du noch Prototype: http://www.prototypejs.org/ und musst das im head-Bereich noch einbinden (das Prototype.js-File)

Scari36 · 2. Februar 2010

ja, man merkt wirklich dass ich 0% ahnung von Javascript habe

und zwar daran dass ich rein garnichts verstehe *augenroll*

Muss doch irgendwie mit einem ganz normalen HTML befehl zu lösen sein oder nicht?? Wieso muss alles immer so kompliziert sein!

TiME-SPLiNTER · 3. Februar 2010

Das kann man nicht mit HTML lösen. HTML heisst Hypertext-Auszeichnungssprache und beschreibt nur das Aussehen der Website. Für solche Aktionen wie Bilder ein- und ausblenden braucht man also etwas anderes: z.B. JavaScript.

Suche

HTML Image Maps mit Mouseover effekt

Scari36

Newbie

TiME-SPLiNTER

Ensign

Scari36

Newbie

1668mib

Gast

TiME-SPLiNTER

Ensign

Scari36

Newbie

TiME-SPLiNTER

Ensign

Ähnliche Themen