On mouse over afbeelding met fade

[125stylie]

Hallo,
Ik ben bezig met het maken van een website. Ik ben al bekend met een mouse-over afbeelding. Dit doe ik met de volgende code:

In HEAD:

<script language="Javascript">
<!-- 
if (document.images) 
{
image1 = new Image 
image2 = new Image 
image1.src = 'LINK NAAR NORMALE PLAATJE'
image2.src = 'LINK NAAR MOUSEOVER PLAATJE' 
} 
-->
</script>

In BODY:

<a onMouseOver="document.mouseover1.src=image2.src" onMouseOut="document.mouseover1.src=image1.src">
<img src="LINK NAAR NORMALE PLAATJE" border=0 name="mouseover1"></a>

Nu vroeg ik me af of het ook mogelijk is om hier een fade effect op te krijgen. Ik had al een hoop gegoogled, maar dit leverde niet erg veel op. Als iemand een werkend script of een werkende tut heeft gevonden dan hoor ik het wel.

 

[manamana]

Hallo stylie.

deze wellicht een helpje voor je.

http://www.leejoo.nl/java/imageeffects.htm

 

[125stylie]

Bedankt, ik ga me er even in verdiepen en kom wel terug als het niet lukt

 

[125stylie]

Helaas kan ik daar niet direct een code vinden die ervoor zorgt dat een mouse-over met twee afbeeldingen als fade verloopt. Wel plaatjes die vervagen met mouse-over, maar geen plaatjes die overfaden in een tweede plaatje bij een mouse-over. Waarschijnlijk is het daar wel uit te halen, maar daar ben ik niet zo goed in

Heeft iemand nog adviezen?

 

[csshunter]

Hoi 125stylie,
Deze CSS pop-up fading geeft fadende images op afstand, maar op soortgelijke manier moet het ook kunnen met een afbeelding gaan waar je overheen hovert.
Dan hoeft het "oude" img niet in- en uit te faden, maar kan er achter als background-image gebruikt worden. Het javascript kan hetzelfde blijven.

• Voordeel van deze methode: als javascript uit staat, wordt het gewoon een css-hover die van de ene stand naar de andere omschakelt.

Met vriendelijke groet,
CSShunter

 

[125stylie]

Ik heb er even gekeken, en er wat aan gesleuteld. Nu is het zo dat het fade effect bij mij niet werkt, en het dus gewoon een mouse-over is. Doe ik wat fout?

Hier de link van de site: http://habbocontainer.nl/rctshows/test.html

 

[csshunter]

Hoi 125stylie,
Als je het script css-popup-fading.js niet hebt geüpload, en in de pagina geen link naar dat javascript zet, weet de browser niet wat ie met de opdrachten onmouseover="fadeIn('img-1')" en onmouseout="fadeOut('img-1')" moet doen.

 

[125stylie]

Ik heb wat in de head stond van die site naar mijn site gekopieerd, en het lijkt te werken. Het enige probleem is nu dat als je er overheen gaat met je muis hij verspringt tussen de twee afbeeldingen.
Hier nogmaals de link van de site: http://habbocontainer.nl/rctshows/test.html

 

[csshunter]

Probeer dit eens?

.hoverfade {
   position: relative;
   }
.hoverfade span img {
   position: absolute;
   top: 0;
   left: 0;
   margin-top: -183px;
   margin-left: -9999px;   /* for noscript: css-popup */
   opacity: 1;             /* for noscript: css-popup */
   }
.hoverfade:hover span img {
   margin-left: 0;         /* for noscript: css-popup */
   z-index: 2;
   }

 

[125stylie]

Het enige merkbare verschil is dat het plaatje nu te ver naar boven staat. Als ik de top verander schuift de afbeelding wel naar onder, maar dan verspringt het nog steeds bij mouse-over.

 

[125stylie]

even een bumpje, maar weet iemand hier een oplossing voor?