Hover effekt Problem

[SkyX1]

Hi Leute,

ich hab ein mehr oder minder kompliziertes Problem. Ich hab eine Infobox auf meiner Seite eingebunden,welche zu einer Sprechblase ummodelliert ist.
Diese erscheint mit Text sowie ich über einen Text gehe.

Soweit so gut. Was ist eine Sprechblase ohne den Erzähler? Zu diesem Zweck soll eine normale Figur dauerhaft an die Stelle unter der Sprechblase erscheinen.

Jetzt das Problem: Wenn der hover Effekt greift, soll das Bild der Figur einer animierten gif Version weichen. Und hier scheiterts grade in meinem Kopf. Jemand Ideen? Seite: Klick

/*Metallmenue listbox*/

#box a {

color:#ffffff;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
width:150px;
}

#box a:hover {

display:block;
color:black;
}

#box a span {display:none;}

#box a:hover span {
position:absolute;  top:530px;left:600px; z-index:4;
display:block;
width:400px;
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
border-radius:10px;
padding:10px;
height:150px;
box-shadow: 5px 5px #000
}
#box a:hover span:before {
  content: ' ';
  position:absolute;
  width: 0;
  height: 0;
  left: 280px;
  top: 170px;
  border: 20px solid;
  border-color:  #111111 #111111 transparent  transparent;
  }
  
  #box a:hover span:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 285px;
  top: 170px;
  border: 15px solid;
  border-color: #fff  #fff transparent transparent;
  }


/*Beispiel für Kupfer*/
<div id="box"><a href="#"><img alt="kupferunrein" src="images/Metallmenue/sorten/kupferunrein.jpg" width="75" height="56" /> Kupfer<span>Kupfer ist als relativ weiches Metall gut formbar und zäh. Als hervorragender Wärme- und Stromleiter findet es vielseitige Verwendung. Darüber hinaus zählt es auch zur Gruppe der Münzmetalle. Als schwach reaktives Schwermetall gehört Kupfer zu den Edelmetallen.</span></a></div>

 

[Tronjer]

Das lässt sich mit etwas JavaScript und Eventhandlern bewerkstelligen. Entweder über hidden DIVs die Bilder ein- und ausblenden, oder mit document.getElementByID("").src die source images tauschen.

jQuery bietet für so etwas einige fertige Funktionen, wie addClass(), css(), toggleClass(), etc.

 

[SkyX1]

danke werd ich mich mal mit beschäftigen

 

[mermshaus]

Siehe auch: → Problem mit Doppeltem hovereffekt - XHTMLforum

 

[SkyX1]

@mermshaus... ich hoffe dir is aufgefallen, das der typ im xhtml forum auch SkyX1 is und der thread von gestern is ;)

 

[mermshaus]

Jip. Deshalb habe ich gepostet.

Möglicherweise ist deine Frage ja bereits beantwortet und die Leute hier können sich doppelte Arbeit sparen.

- Crossposting

 

[SkyX1]

naja im grunde ist sie beantwortet :) danke