PDA

Click to See Complete Forum and Search --> : Image DownState with rollover still working

kjw
07-13-2004, 06:33 AM
Hi

Using Image Ready 7 my rollover buttons have 3 states; image.gif, image-over.gif, image-sel.gif.

I have two problems with my rollover buttons.

1.) My selected-state doesn't persist when I click on button. This is because it goes to another url and looses its selected state. Is there
a way to hold this info or code the URL's into a function to then check on page load?

2.) Once this selected state is held I still want the rollover state to be active but not revert back to the original image on mouse-out.

The best way of explaining the exact functionality I need is by using this url as an example, as it does exactly what I want to do.
(see the blue menu across the top)
http://www.travelex.co.uk/personal/default.asp

Here's the code I have so far.


<!-- ImageReady Preload Script (MainNav.html) -->
<SCRIPT TYPE="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImagesArray(array) {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<array.length; i+=2) {
document[array[i]].src = array[i+1];
}
}
}

function changeImages() {
changeImagesArray(changeImages.arguments);
}

function toggleImages() {
for (var i=0; i<toggleImages.arguments.length; i+=2) {
if (selected == toggleImages.arguments[i]) changeImagesArray(toggleImages.arguments[i+1]);
}
}

var selected = '';
var preloadFlag = false;
function preloadImages() {
if (document.images) {
MainNav_02_over = newImage("images/MainNav_02-over.gif");
MainNav_02_sel = newImage("images/MainNav_02-sel.gif");
MainNav_03_sel = newImage("images/MainNav_03-sel.gif");
MainNav_03_over = newImage("images/MainNav_03-over.gif");
MainNav_04_sel = newImage("images/MainNav_04-sel.gif");
MainNav_04_over = newImage("images/MainNav_04-over.gif");
MainNav_05_sel = newImage("images/MainNav_05-sel.gif");
MainNav_05_over = newImage("images/MainNav_05-over.gif");
preloadFlag = true;
}
}

// -->
</SCRIPT>
<!-- End Preload Script -->





<TABLE WIDTH=760 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/MainNav_01.gif" WIDTH=267 HEIGHT=26 ALT=""></TD>
<TD>
<A HREF="#"
ONMOUSEOVER="toggleImages('MainNav_03', new Array('MainNav_02', 'images/MainNav_02-over.gif', 'MainNav_03', 'images/MainNav_03-sel.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05.gif'), 'MainNav_04', new
Array('MainNav_02', 'images/MainNav_02-over.gif', 'MainNav_03', 'images/MainNav_03.gif',
'MainNav_04', 'images/MainNav_04-sel.gif', 'MainNav_05', 'images/MainNav_05.gif'), 'MainNav_05', new Array('MainNav_02', 'images/MainNav_02-over.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05',
'images/MainNav_05-sel.gif'), '', new Array('MainNav_02', 'images/MainNav_02-over.gif'));
return true;"
ONMOUSEOUT="toggleImages('MainNav_02', new Array('MainNav_02', 'images/MainNav_02-sel.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05.gif'), 'MainNav_03', new Array('MainNav_02',
'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03-sel.gif', 'MainNav_04',
'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05.gif'), 'MainNav_04', new Array('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04-sel.gif', 'MainNav_05', 'images/MainNav_05.gif'),
'MainNav_05', new Array('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03',
'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05-sel.gif'), '', new Array('MainNav_02', 'images/MainNav_02.gif')); return true;"
ONMOUSEUP="selected='MainNav_02'; changeImages('MainNav_02', 'images/MainNav_02-sel.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05.gif'); return true;">
<IMG NAME="MainNav_02" SRC="images/MainNav_02.gif" WIDTH=66 HEIGHT=26 BORDER=0 ALT=""></A></TD>
<TD>
<A HREF="#"
ONMOUSEOVER="toggleImages('MainNav_02', new Array('MainNav_02', 'images/MainNav_02-sel.gif', 'MainNav_03', 'images/MainNav_03-over.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05.gif'), 'MainNav_04', new
Array('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03-over.gif',
'MainNav_04', 'images/MainNav_04-sel.gif', 'MainNav_05', 'images/MainNav_05.gif'), 'MainNav_05', new Array('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03-over.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05',
'images/MainNav_05-sel.gif'), '', new Array('MainNav_03', 'images/MainNav_03-over.gif'));
return true;"
ONMOUSEOUT="toggleImages('MainNav_02', new Array('MainNav_02', 'images/MainNav_02-sel.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05.gif'), 'MainNav_03', new Array('MainNav_02',
'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03-sel.gif', 'MainNav_04',
'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05.gif'), 'MainNav_04', new Array('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04-sel.gif', 'MainNav_05', 'images/MainNav_05.gif'),
'MainNav_05', new Array('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03',
'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05-sel.gif'), '', new Array('MainNav_03', 'images/MainNav_03.gif')); return true;"
ONMOUSEUP="selected='MainNav_03'; changeImages('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03-sel.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05.gif'); return true;">
<IMG NAME="MainNav_03" SRC="images/MainNav_03.gif" WIDTH=81 HEIGHT=26 BORDER=0 ALT=""></A></TD>
<TD>
<A HREF="#"
ONMOUSEOVER="toggleImages('MainNav_02', new Array('MainNav_02', 'images/MainNav_02-sel.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04-over.gif', 'MainNav_05', 'images/MainNav_05.gif'), 'MainNav_03', new
Array('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03-sel.gif',
'MainNav_04', 'images/MainNav_04-over.gif', 'MainNav_05', 'images/MainNav_05.gif'), 'MainNav_05', new Array('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04-over.gif', 'MainNav_05',
'images/MainNav_05-sel.gif'), '', new Array('MainNav_04', 'images/MainNav_04-over.gif'));
return true;"
ONMOUSEOUT="toggleImages('MainNav_02', new Array('MainNav_02', 'images/MainNav_02-sel.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05.gif'), 'MainNav_03', new Array('MainNav_02',
'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03-sel.gif', 'MainNav_04',
'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05.gif'), 'MainNav_04', new Array('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04-sel.gif', 'MainNav_05', 'images/MainNav_05.gif'),
'MainNav_05', new Array('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03',
'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05-sel.gif'), '', new Array('MainNav_04', 'images/MainNav_04.gif')); return true;"
ONMOUSEUP="selected='MainNav_04'; changeImages('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04-sel.gif', 'MainNav_05', 'images/MainNav_05.gif'); return true;">
<IMG NAME="MainNav_04" SRC="images/MainNav_04.gif" WIDTH=83 HEIGHT=26 BORDER=0 ALT=""></A></TD>
<TD>
<A HREF="#"
ONMOUSEOVER="toggleImages('MainNav_02', new Array('MainNav_02', 'images/MainNav_02-sel.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05-over.gif'), 'MainNav_03', new
Array('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03-sel.gif',
'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05-over.gif'), 'MainNav_04', new Array('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04-sel.gif', 'MainNav_05',
'images/MainNav_05-over.gif'), '', new Array('MainNav_05', 'images/MainNav_05-over.gif'));
return true;"
ONMOUSEOUT="toggleImages('MainNav_02', new Array('MainNav_02', 'images/MainNav_02-sel.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05.gif'), 'MainNav_03', new Array('MainNav_02',
'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03-sel.gif', 'MainNav_04',
'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05.gif'), 'MainNav_04', new Array('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04-sel.gif', 'MainNav_05', 'images/MainNav_05.gif'),
'MainNav_05', new Array('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03',
'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05-sel.gif'), '', new Array('MainNav_05', 'images/MainNav_05.gif')); return true;"
ONMOUSEUP="selected='MainNav_05'; changeImages('MainNav_02', 'images/MainNav_02.gif', 'MainNav_03', 'images/MainNav_03.gif', 'MainNav_04', 'images/MainNav_04.gif', 'MainNav_05', 'images/MainNav_05-sel.gif'); return true;">
<IMG NAME="MainNav_05" SRC="images/MainNav_05.gif" WIDTH=89 HEIGHT=26 BORDER=0 ALT=""></A></TD>
<TD>
<IMG SRC="images/MainNav_06.gif" WIDTH=174 HEIGHT=26 ALT=""></TD>
</TR>
</TABLE>




Can you help?
Thanks
David Harrison
07-13-2004, 07:27 AM
Don't use JavaScript for rollover effects. Here is a CSS way to do it:

Edit: To maintain state of the link, you'll either need a server-side language or you'll have to manually modify the styles slightly on every page. I'll post how it can be done client-side in a few mins.

Another Edit: Attachment removed because there is a better example below.
David Harrison
07-13-2004, 07:40 AM
OK, I lied, in this example the styles always stay the same, but you have to move the id="active" to the link you want to maintain it's state on each page.
kjw
07-13-2004, 08:19 AM
Thanks lavalamp, however, this has to be javascript as it needs to work in NN 4+ and IE 4+, so stylesheets will not work.

Also the navigation is going into a header include therefore can't be manually edited on each page.

Any other JavaScript solution welcome.

Thanks
David Harrison
07-13-2004, 08:23 AM
Originally posted by kjw
Thanks lavalamp, however, this has to be javascript as it needs to work in NN 4+ and IE 4+Why? They are both so old that they can just fall back on no-styles compatibility.

Look at the stats (http://www.thecounter.com/stats/2004/May/browser.php), not many people are still using them.