SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Jun 26, 2007, 06:47 #1
Higlighted on mouseOver with 1 highlighted by default
I have the following script which grabs all images in a div with id "right" and attaches "_mo" (+ suffix) to them on mouseover. These images are navigation thumbs that each link to a page which has the full version of the image (see for instance this page). The following works fine:
Code:var W3CDOM = (document.createElement && document.getElementsByTagName); var mouseOvers = new Array(); var mouseOuts = new Array(); window.onload = init; function init() { if (!W3CDOM) return; var nav = document.getElementById('right'); var imgs = nav.getElementsByTagName('img'); for (var i=0;i<imgs.length;i++) { imgs[i].onmouseover = mouseGoesOver; imgs[i].onmouseout = mouseGoesOut; var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.')); mouseOuts[i] = new Image(); mouseOuts[i].src = imgs[i].src; mouseOvers[i] = new Image(); mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_mo" + suffix; imgs[i].number = i; } } function mouseGoesOver() { this.src = mouseOvers[this.number].src; } function mouseGoesOut() { this.src = mouseOuts[this.number].src; }
Thanks for any help!
-
Jun 26, 2007, 14:22 #2
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
could you not simply do an indexOf on the id to check to see whether it has current or _mo already in there, and if it does then to ignore it.
-
Jun 27, 2007, 00:05 #3
-
Jun 27, 2007, 00:56 #4
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:for (var i=0;i<imgs.length;i++) { if(imgs[i].id.indexOf('_mo') == 0) {// _mo is not found in the id imgs[i].onmouseover = mouseGoesOver; imgs[i].onmouseout = mouseGoesOut; var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.')); mouseOuts[i] = new Image(); mouseOuts[i].src = imgs[i].src; mouseOvers[i] = new Image(); mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_mo" + suffix; imgs[i].number = i; } }
I'm guessing thats where it's needed. basically its
Code:if(imgs[i].id.indexOf('_mo') == 0) // checks if _mo doesn't exist in the id if(imgs[i].id.indexOf('_mo') > -1) // checks if _mo exists
-
Jun 27, 2007, 01:47 #5
That didn't quite work... What I've come up with so far is this:
Code:function init() { if (!W3CDOM) return; var nav = document.getElementById('right'); var imgs = nav.getElementsByTagName('img'); var active = document.getElementById('current'); for (var i=0;i<imgs.length;i++) { if(imgs[i] != active) { imgs[i].onmouseover = mouseGoesOver; imgs[i].onmouseout = mouseGoesOut; var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.')); mouseOuts[i] = new Image(); mouseOuts[i].src = imgs[i].src; mouseOvers[i] = new Image(); mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_mo" + suffix; imgs[i].number = i; } } }
-
Jun 27, 2007, 02:36 #6
Ah, nevermind: solved. Using the above script with the help of a dash of php did the trick. If you're wondering: the php-loop checks whether each current thumbnail image is associated with the page's large image; if so it adds the "_mo" suffix (no js needed) as well as "id="current". Bliss.
Bookmarks