TheFilmGod Posted March 15, 2007 Share Posted March 15, 2007 How do I do rollover images? Please explain in easy english terms. I tried researching on the internet and I'm still confuzed. Any help is greatlly appreciated. Quote Link to comment https://forums.phpfreaks.com/topic/42784-rollover-images/ Share on other sites More sharing options...
DanDaBeginner Posted March 15, 2007 Share Posted March 15, 2007 the logic on the mouse over is this: default image(when the page load): <img src="picture1"> but when a user mousover on it: <img src="picture2"> and when loses its focus in the image it will : <img src="picture1"> Quote Link to comment https://forums.phpfreaks.com/topic/42784-rollover-images/#findComment-207835 Share on other sites More sharing options...
mgs019 Posted March 15, 2007 Share Posted March 15, 2007 I found the easiest way is to use frontpage's interactive button tool to generate the FP_swapimage script or what ever it is called and replace the button images as you wish. You can also make it swap another image by playing with the image id/name tags. Hope that helps. Martin Quote Link to comment https://forums.phpfreaks.com/topic/42784-rollover-images/#findComment-207878 Share on other sites More sharing options...
mainewoods Posted March 16, 2007 Share Posted March 16, 2007 <a href="the goto url" onmouseover="document.getElementById('imgId').src = 'new pic url';" onmouseout="document.getElementById('imgId').src = 'original pic url';" ><img id="imgId" src="original pic url"></a> --notice that the img tag has an id with the value 'imgId' which is then used in the 'onmouseover' and 'onmouseout' event code Quote Link to comment https://forums.phpfreaks.com/topic/42784-rollover-images/#findComment-208542 Share on other sites More sharing options...
DeathStar Posted March 16, 2007 Share Posted March 16, 2007 I had to make a on keypress thing one day ex: image chage when you type in a textbox :\ Dreamweaver gave me the answer! Just modify it a bit <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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } 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[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('picture2.jpg')"> <a href="#"><img src="picture1.jpg" alt="laoding" name="Image1" border="0" id="Image1" /></a> type and see <input type="text" name="textfield" onkeyup="MM_swapImgRestore()" onkeypress="MM_swapImage('Image1','','picture2.jpg',1)"/> Quote Link to comment https://forums.phpfreaks.com/topic/42784-rollover-images/#findComment-209153 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.