GIF in Image-Map bei onmouseover laden

kellykatz

Grünschnabel
Hallo,

mein Problem ist folgendes und ich hab mir schon ne Woche nen Wolf gesucht:

Die navigation einer internetseite besteht aus vielen unterschiedlichen grafiken, welche, wenn man darüber hovert, eine gif animation zeigen sollen. es kommt hinzu, dass die bilder image-maps darstellen und die hot spots alle polygonförmig sind. also habe ich es mit hilfe von javascript geschafft, dass bei einem hover über einen hot spot das gif in einem sich über der grafik befindlichen div-container gezeigt wird. der hot spot an sich befindet sich auf einem transparenten platzhalter, der sich immer über der grafik und dem div-container befindet, da es sonst zu einem flackern käme.
das problem ist, dass nicht alle gifs in einer schleife ablaufen, sondern nur einmal und die animation schon abgelaufen ist, wenn man über das element hovert.

hier der code, den ich verwende, auf ein einfaches bild angewendet (der hotspot ist hier ein kreis):

Code:
<head>
<script type="text/javascript">
<!--
function sichtbar() {
document.getElementById("p1").style.background="url(hover.gif)";
document.getElementById("p1").style.display="block";
}

function unsichtbar()
{
document.getElementById("p1").style.display="none";
}
//-->
</script>

<style type="text/css">

.platzhalter{
 position:absolute;
 top:0;
 left:0;
 z-index:3;
}

.grund, .rahmen{
 position:absolute;
 top:0;
 left:0;
 }

.rahmen{
 height:377px;
 width:264px;
 z-index:2;
 display:none;
 background-image:url(platzhalter.png);
 overflow:visible;
}

</style>

</head>

<body>

<div class="rahmen" id="p1">
<img src="hover.gif" width="264" height="377" />
</div>
<img class="grund" src="navigationselment.png" width="264" height="377" />

<img src="platzhalter.png" width="264" height="377" border="0" usemap="#lampe" class="platzhalter" />
<map name="lampe" id="lampe">
<area shape="circle" coords="108,102,47" href="#" onmouseover="sichtbar()" onmouseout="unsichtbar()" />
</map>


</body>
</html>

meine frage ist: gibt es eine möglichkeit, dass das gif erst geladen wird, wenn man über den hotspot fährt, oder dass das gif dann erst abgespielt wird? (es soll natürlich bei jedem hovern aufs neue abgespielt werden.)

und es kommt noch eine zweite frage hinzu:

es sollen ja sehr viele verschiedene gifs angezeigt werden. wenn man nun über das jeweilige navigationselement hovert, kann ich, wenn ich die einzelnen gifs "hover_1.gif" , "hover_2.gif"... "hover_n.gif" benenne, das javascript nach der jeweiligen id nummer nach dem dazupassenden gif suchen lassen?

also dass die nummer den dateinamen komplettiert ..="<src=hover_[id_nummer].gif>" in dieser art?

ich hoffe, es ist verständlich ausgedrückt.

bitte versucht es einfach zu halten, mit javascript kenne ich mich noch nicht sehr gut aus

ich bedanke mich jetzt schon, denn die seite soll als kompetenzprojekt an meiner schule dienen, welche schwerwiegende noten bekommen soll. ihc stecke wirklich seit einem jahr mein herzblut in diese seite.

noch einmal danke, kelly
 
Hi,

das erste Problem kannst du lösen, indem du dem Dateiname einen Zeitstempel anfügst.
Code:
document.getElementById("p1").style.background="url(hover.gif?"+new Date().getTime()+")";

Zu deiner zweiten Frage - falls die Ziffer bei ID und Dateiname gleich sind, könntest du diese der Funktion als Argument übergeben. Innerhalb der Routine werden die benötigten Zeichenketten zusammengefügt.
Code:
function sichtbar(intIndex) {
  document.getElementById("p"+intIndex).style.background="url(hover_"+intIndex+".gif"+new Date().getTime()+")";
  document.getElementById("p"+intIndex).style.display="block";
}

function unsichtbar(intIndex){
  document.getElementById("p"+intIndex).style.display="none";
}

Die benötigte Ziffer wird im Funktionsaufruf übergeben:
Code:
<area shape="circle" coords="108,102,47" href="#" onmouseover="sichtbar(1)" onmouseout="unsichtbar(1)" />

Zuletzt möchte ich dich bitten, die Gross- und Kleinschreibung wie in der Netiquette unter Punkt 15 zugestimmt einzuhalten. Besten Dank im voraus.

Ciao
Quaese
 
Danke!

Das erste Problem hat sich mittlerweile schon erledigt. mein Fehler war ganz einfach, dass ich im HTML-Text im div-Kontainer schon das Bild, das eigentlich erst beim Hovern gezeigt werden sollte, definiert hatte, also es schon von vornherein da war. Ich musste nur diese Zeile löschen und nun funktioniert es einwandfrei.
Aber trotzdessen danke für diese Lösung.

Für die zweite Lösung will ich mich herzlich bedanken. Es wird mir eine menge Arbeit ersparen. :)

vielen Dank

kelly
 

Neue Beiträge

Zurück