✔ ImageMap + Mouseover

X

xferahx

Grünschnabel
Liebe Experten,

ich als Neuling habe folgendes gemacht:
1) Ein Bild in gimp bearbeitet, so dass verschiedene Bereiche im Bild zu verschiedenen Links führen, das funktioniert auch einwandfrei (eingebettet in Joomla in ein Artikel)

<p>&nbsp;</p>
<p><img src="images/IMG_1696.JPG" usemap="#map" id="imagemap" border="0" height="336" width="444" />
<map name="map">

<!-- #$-:Image map file created by GIMP Image Map plug-in --> <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$VERSION:2.3 --> <!-- #$AUTHOR:xxx-->

<area shape="rect" coords="12,127,57,197" title="Frankfurt" href="http://www.gmx.de" target="_blank"
<area shape="rect" coords="57,127,114,197" title="Stuttgart" href="http://www.google.com" target="_blank" />
<area shape="rect" coords="114,127,184,195" title="Oberhausen" href="http://www.facebook.com" target="_blank" />
<area shape="rect" coords="187,127,233,195" title="Hannover" href="http://www.web.de" target="_blank" />
<area shape="rect" coords="235,126,302,193" title="Zürich" href="http://www.bild.de" target="_blank" />
<area shape="rect" coords="307,128,356,193" title="Wien" href="http://www.audi.de" target="_blank" />
<area shape="rect" coords="360,128,431,194" title="München" href="http://www.telefonbuch.de" target="_blank" />

</map>
</p>

2. nun kommt das Thema Mouseover... je nachdem in welchen Bereich ich mit der Maus zeige, will ich dass das Bild ausgetauscht wird. Den code habe ich wie folgt für den ersten Link geändert

<p>&nbsp;</p>
<p><img src="images/IMG_1696.JPG" usemap="#map" id="imagemap" border="0" height="336" width="444" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in --> <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$VERSION:2.3 --> <!-- #$AUTHOR:cetin -->

<area shape="poly" coords="12,127,57,197" title="Frankfurt" href="http://www.gmx.de" target="_blank" onmouseover="ReplaceImage('images/IMG_1696a.JPG')" onmouseout="ReplaceImage('images/IMG_1696.JPG')" />

</map>
</p>

3. So wie ich es verstanden habe, muss auch in der "index.php" datei ein kleiner code hinzugefügt werden, folgendes habe ich hinzugefügt

function ReplaceImage(filename)
{
document.getElementById("imagemap").src = filename;
}

4. Trotzdem funktioniert ein Mouseover nicht... hat jmd. eine Ahnung was ich falsch gemacht haben könnte?

Vielen DAnk im Vorauf für die Hilfe,
xferahx
 
Also abgesehen davon das der Code nicht formatiert und deshalb sehr schlecht zu lesen ist. Im ersten Code fehlt bei area für Frankfurt das schließende "/>".

Ansonsten klappt es damit bei mir!
 
Danke für deine Antwort... Ja, wie gesagt Anfänger... das mit dem formatieren muss ich noch üben... Also bei mir funktioniert es nicht... was mache ich bloß falsch? es ist doch richtig dass der 2. Code in die index.php Datei muss oder? Genauso wie er da steht, nicht mehr und nicht weniger...
 
Das muss alles in die gleiche Datei!

HTML: 
<script language="javascript" type="text/javascript">
function ReplaceImage(filename) {
	document.getElementById("imagemap").src = filename;
}
</script>

<p><img src="images/IMG_1696.JPG" usemap="#map" id="imagemap" border="0" height="336" width="444" />
<map name="map">
	<area shape="rect" coords="12,127,57,197" title="Frankfurt" href="http://www.gmx.de" target="_blank" onmouseover="ReplaceImage('images/IMG_1696a.JPG')" onmouseout="ReplaceImage('images/IMG_1696.JPG')" />
	<area shape="rect" coords="57,127,114,197" title="Stuttgart" href="http://www.google.com" target="_blank" onmouseover="ReplaceImage('images/IMG_1696b.JPG')" onmouseout="ReplaceImage('images/IMG_1696.JPG')" />
	<area shape="rect" coords="114,127,184,195" title="Oberhausen" href="http://www.facebook.com" target="_blank" onmouseover="ReplaceImage('images/IMG_1696c.JPG')" onmouseout="ReplaceImage('images/IMG_1696.JPG')" />
	<area shape="rect" coords="187,127,233,195" title="Hannover" href="http://www.web.de" target="_blank" onmouseover="ReplaceImage('images/IMG_1696d.JPG')" onmouseout="ReplaceImage('images/IMG_1696.JPG')" />
	<area shape="rect" coords="235,126,302,193" title="Zürich" href="http://www.bild.de" target="_blank" />
	<area shape="rect" coords="307,128,356,193" title="Wien" href="http://www.audi.de" target="_blank" />
	<area shape="rect" coords="360,128,431,194" title="München" href="http://www.telefonbuch.de" target="_blank" />
</map>
</p>
 
ich sehe gerade, dass Jommla das einfügen von Javascript in Beiträgen verbietet... wir müsssen jetzt schnell einmal schauen, wo wir diese codezeilen (außerhalb von Joomla) reinklimpern können :) vielen Dank...
 
OK, nun habe ich einen super user und habe ich den Einstellungen von Joomla javascript zugelassen... somit kann ich den code in den source-code des artikels einfügen und er bleibt nach dem speichern auch stehen.... doch was passiert auf der Webpage?

ich mache ein mouseover über den Bereich eines Bildes und aus dem Bild wird so etwas (siehe Anhang) und verschwindet dann komplett... so sollte das aber nicht sein :(

ps: der pfad zu beiden bildern ist richtig... daran sollte es also nicht liegen...

Danke für die Hilfe
 

Anhänge

  • Untitled.png
    Untitled.png
    405 Bytes · Aufrufe: 530
Sieht trotzdem erstmal so aus als ob etwas mit dem Dateinamen und/oder dem Pfad zur Datei nicht stimmen würde.

Wird das erst Bild korrekt angezeigt und was meinst du mit "es verschwindet komplett"?
 
Also folgendes passiert:
a.) Wenn Die Seite geladen wird ist das Bild zu sehen
b.) gehe ich mit der Maus auf ein Bereich vom Bild wo wir das Mouseover haben, sieht man die angehängte Grafik oben (so lange, wie ich die Maus von dem Bereich nicht wegbewege).
c.) gehe ich mit der Maus weg (so dass ich das Bild nicht mehr "berühre") habe ich überhaupt keine Grafik mehr... nichts.

Beide Dateien IMG_1696.JPG und IMG_1696a.JPG liegen im selben Ordner "images/..."

Bitte um Hilfe :( hier noch einmal mein Code

<p>
<script language="javascript" type="text/javascript">// <![CDATA[
function ReplaceImage(filename) {
document.getElementById("imagemap").src = filename;
}
// ]]></script>
</p>
<p><img src="images/IMG_1696.JPG" usemap="#map" id="imagemap" border="0" height="336" width="444" />
<map name="map">
<area shape="rect" coords="12,127,57,197" title="Frankfurt" href="http://www.gmx.de" target="_blank" onmouseover="ReplaceImage('images/IMG_1696a.JPG')" onmouseout="ReplaceImage('images/IMG_1696.JPG')" />

</map>
</p>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück