/    Sign up×
Community /Pin to ProfileBookmark

Image DownState with rollover still working

Copy linkTweet thisAlerts:
Jul 13.2004

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)
[URL=http://www.travelex.co.uk/personal/default.asp]http://www.travelex.co.uk/personal/default.asp[/URL]

Here’s the code I have so far.

[CODE]
<!– 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>

[/CODE]

Can you help?
Thanks

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@David_HarrisonJul 13.2004 — 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.
Copy linkTweet thisAlerts:
@David_HarrisonJul 13.2004 — 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.

[upl-file uuid=377f1c33-487a-43c8-900a-0739f5c8f1e4 size=21kB]css image rollover 2.zip[/upl-file]
Copy linkTweet thisAlerts:
@kjwauthorJul 13.2004 — 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
Copy linkTweet thisAlerts:
@David_HarrisonJul 13.2004 — [i]Originally posted by kjw [/i]

[B]Thanks lavalamp, however, this has to be javascript as it needs to work in NN 4+ and IE 4+[/B][/QUOTE]Why? They are both so old that they can just fall back on no-styles compatibility.

Look at the [url=http://www.thecounter.com/stats/2004/May/browser.php]stats[/url], not many people are still using them.
×

Success!

Help @kjw spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...