Archief - HTML: (advanced) image rollover

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

DelaZ

Legacy Member
http://www.fuckhollywood.be/

Als je naar fuckhollywood.be gaat zul je de banners zien per news item. Dit is telkens een rollover image. Waarvan je de code hieronder kan vinden:

script (tussen header en body) [STANDAARD DREAMWEAVER 8 CODE]
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>


banner (in body)
<img src="http://www.fuckhollywood.be/news/3_a.jpg" width="600" border="0" id="3" onclick="MM_swapImage('3','','http://www.fuckhollywood.be/news/3.jpg')" onmouseout="MM_swapImgRestore()"/>

De bedoeling is dus dat je als je op de banner drukt de banner wordt geswapt voor de originele afbeelding en als je er terug uit gaat met je muis, de banner weer tevoorschijn komt. Blijkbaar werkt het enkel op firefox, en niet in internet explorer... Iemand enig idee?

orez

Legacy Member
gebruik hiervoor toch geen Javascript, maar gewoon simpele CSS does the trick...

Gewoon van uw 2 states 1 grote image maken, en dan met wat background-position spelen.

Meer is er ni aan, en ge hebt maar 2 lijntjes code!

*edit: aan uw volledige html code te zien ist ook maar allemaal een zootje hé :s

DelaZ

Legacy Member
Probleem is dat die code in een forum geschreven word, een script brengt deze dan op de voorpagina, dus ik kan geen css denk ik invoeren in die forumpost.

Voor de rest is de code heel onduidelijk voor het moment door diezelfde invoerscript.

*edit:ok probleem ligt dus bij het feit dat ik de height weglaat omdat het niet anders kan, en daarmee doet IE moeilijk. Zou iemand oplossing weten?

DelaZ

Legacy Member
Ok fixed :D

<img src="http://www.fuckhollywood.be/news/6_a.jpg" id="image_6" onmouseout="MM_swapImgRestore()" onclick="MM_swapImage('image_6','','http://www.fuckhollywood.be/news/6.jpg')" />

KoenDK

Legacy Member
DelaZ zei:
De bedoeling is dus dat je als je op de banner drukt de banner wordt geswapt voor de originele afbeelding en als je er terug uit gaat met je muis, de banner weer tevoorschijn komt. Blijkbaar werkt het enkel op firefox, en niet in internet explorer... Iemand enig idee?


ik zie dus niets hé
welke banner?
welke swapping?

nothing happens dude :sop:

XA4

Legacy Member
KoenDK zei:
ik zie dus niets hé
welke banner?
welke swapping?

nothing happens dude :sop:
ik had het eerst ook niet door, maar je moet op 1 van die banners klikken (vandaar ook die "click to enlarge) en dan vergroot die naar het volledige formaat (en als je er terug afgaat, wordt het terug de banner)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan