PDA

View Full Version : Resolved Need help with image hover js effect



Riku
01-10-2011, 12:32 PM
Script Title: DOM image rollover

Script URL (on DD): http://www.dynamicdrive.com/dynamicindex15/domroll.htm



This img hover effect works - but for a short period of time!
When I update it at my blog (http://districtofbrokendreams.blogspot.com/), it works for 2 or 3 hours, then it stops working even if I don't touch any code of my page. Why? How? How can I make it work?
I use blogger, so, instead of uploading the javascript file to any server, I used the one the was already on DD (http://www.dynamicdrive.com/dynamicindex15/chrisdomroll.js).
Can you help me?

Also, it used to work normally, but I don't remember what I did before. I erased it all once and had to start again.

Thaaanks!

jscheuer1
01-10-2011, 02:54 PM
You cannot link directly to the script on Dynamic Drive. Its servers prevent 'hotlinking'. It will appear to work perhaps for as long as you have the script in your browser's cache. But once that expires, the hotlink will no longer work.

This also means that for others, it generally will never work.

If you need a remote host for your script, find another and upload it there. Or you could just put the script directly on the page. That is if your blog host allows that.

replace:


<script src='http://www.dynamicdrive.com/dynamicindex15/chrisdomroll.js' type='text/javascript'/>
</script>

with:


<script type="text/javascript">
//=====================================================================
// DOM Image Rollover v3 (hover)
//
// Demo: http://chrispoole.com/scripts/dom_image_rollover_hover
// Script featured on: Dynamic Drive (http://www.dynamicdrive.com)
//=====================================================================
// copyright Chris Poole
// http://chrispoole.com
// This software is licensed under the MIT License
// <http://opensource.org/licenses/mit-license.php>
//=====================================================================

function domRollover() {
if (navigator.userAgent.match(/Opera (\S+)/)) {
var operaVersion = parseInt(navigator.userAgent.match(/Opera (\S+)/)[1]);
}
if (!document.getElementById||operaVersion <7) return;
var imgarr=document.getElementsByTagName('img');
var imgPreload=new Array();
var imgSrc=new Array();
var imgClass=new Array();
for (i=0;i<imgarr.length;i++){
if (imgarr[i].className.indexOf('domroll')!=-1){
imgSrc[i]=imgarr[i].getAttribute('src');
imgClass[i]=imgarr[i].className;
imgPreload[i]=new Image();
if (imgClass[i].match(/domroll (\S+)/)) {
imgPreload[i].src = imgClass[i].match(/domroll (\S+)/)[1]
}
imgarr[i].setAttribute('xsrc', imgSrc[i]);
imgarr[i].onmouseover=function(){
this.setAttribute('src',this.className.match(/domroll (\S+)/)[1])
}
imgarr[i].onmouseout=function(){
this.setAttribute('src',this.getAttribute('xsrc'))
}
}
}
}
domRollover();
</script>

Riku
01-10-2011, 06:56 PM
Thank you so much! I think it worked.

What I didn't understand was the thing about working for some time and then not working anymore. That was totally nonsense to me untill you explained it.

Now it works! And I think it'll last.

:D