1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 7:10 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Back Button Messes Up Javascript

         

macr0

7:10 am on Aug 15, 2008 (gmt 0)

10+ Year Member



I'm using javascript to swap some images in and out for rollovers, but if you use the browser "Back Button" the images don't swap properly. Is there a way to fix this? I tried the cache prevention techniques in order to force a reload of the page, but they didn't work for me. Granted I didn't understand how to use them.... Thanks.

DrDoc

9:15 am on Aug 15, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld!

Well, I guess it entirely depends on how your rollovers are set up. There is nothing inherently wrong with using JavaScript, except that you may need to force the image load if the images are no longer defined (as is the case with using the back button, since the preloading may not fire, depending on how you have things set up).

Better yet -- replace your JavaScript rollovers with CSS :hover.

macr0

5:30 pm on Aug 18, 2008 (gmt 0)

10+ Year Member



Hey Doc, thanks for the reply. I actually did switch to CSS for some of the rollovers because I do understand CSS much better. Problem is I am working with multiple div rollovers, and unless I've missed something, I don't think thats possible with only CSS, at least not in the way I'd like to do it. I'll post my code to give you and idea of what exactly I'm doing.

The HTML 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Example</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="lightwindow.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<script language = "JavaScript">
<!-- Script for "menubox"
if (document.images) {
button1a = new Image()
button1a.src = "images/homeup.gif"
button1b = new Image()
button1b.src = "images/homedown.gif"
button1c = new Image()
button1c.src = "images/advocacyup.jpg"
button1d = new Image()
button1d.src = "images/advocacydown.jpg"
button1e = new Image()
button1e.src = "images/marketingup.jpg"
button1f = new Image()
button1f.src = "images/marketingdown.jpg"
button1g = new Image()
button1g.src = "images/artup.jpg"
button1h = new Image()
button1h.src = "images/artdown.jpg"
button1i = new Image()
button1i.src = "images/videographyup.jpg"
button1j = new Image()
button1j.src = "images/videographydown.jpg"
button6a = new Image()
button6a.src = "images/productions.gif"
button6b = new Image()
button6b.src = "images/advocacy.gif"
button6c = new Image()
button6c.src = "images/marketing.gif"
button6d = new Image()
button6d.src = "images/art.gif"
button6e = new Image()
button6e.src = "images/videography.gif"
button6f = new Image()
button6f.src = "images/trans.gif"
}
// -->
</script>
</head>
<body id="section-home">
<div id="container">
<div id="linkbox">
<div id="home"><a href="index.html" onMouseOver = "if(document.images) { button6.src = button6a.src }" onMouseOut = "if(document.images) { button6.src = button6f.src}"><img src="images/trans.gif" alt="Example Home" width="164" height="229" border="0" /></a></div>
<div id="homeshadow"></div>
<div id="second"><a href="advocacy.html" onMouseOver = "if(document.images) { button6.src = button6b.src }" onMouseOut = "if(document.images) { button6.src = button6f.src}"><img src="images/trans.gif" alt="Advocacy" width="160" height="167" border="0" /></a></div>
<div id="third"><a href="marketing.html" onMouseOver = "if(document.images) { button6.src = button6c.src }" onMouseOut = "if(document.images) { button6.src = button6f.src}"><img src="images/trans.gif" alt="Marketing" width="130" height="167" border="0" /></a></div>
<div id="fourth"><a href="art.html" onMouseOver = "if(document.images) { button6.src = button6d.src }" onMouseOut = "if(document.images) { button6.src = button6f.src}"><img src="images/trans.gif" alt="Arts & Culture" width="140" height="258" border="0" /></a></div>
<div id="fifth"><a href="videography.html" onMouseOver = "if(document.images) { button6.src = button6e.src }" onMouseOut = "if(document.images) { button6.src = button6f.src}"><img src="images/trans.gif" alt="Videography" width="170" height="187" border="0" /></a></div>
<div id="fourthshadow"></div>
<div id="menubox"><img src="images/trans.gif" name="button6" /></div>
</div>

The CSS 


/* CSS Document */
body {
background-attachment: scroll;
margin: 0px;
background-image: url(images/trainbackground.jpg);
background-position: center top;
background-repeat: no-repeat;
background-color: #F4F3F3;
}
#container {
padding-top: 22px;
width: 775px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#linkbox {
height: 320px;
width: 766px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 9px;
position: relative;
}
#home a {
height: 229px;
width: 164px;
left: 0px;
top: 0px;
background-image: url(images/homeup.gif);
position: absolute;
}
#home a:link, #home a:visited {
background-image: url(images/homeup.gif);
}
#home a:hover, #home a:active {
background-image: url(images/homedown.gif);
}
#section-home #home a
{
background-image: url(images/homedown.gif);
}
#section-home #menubox
{
background-image: url(images/productions.gif);
}
#second a {
height: 167px;
width: 160px;
left: 164px;
top: 62px;
position: absolute;
background-image: url(images/advocacyup.jpg);
}
#second a:link, #second a:visited {
background-image: url(images/advocacyup.jpg);
}
#second a:hover, #second a:active {
background-image: url(images/advocacydown.jpg);
}
#section-second #second a
{
background-image: url(images/advocacydown.jpg);
}
#section-second #menubox
{
background-image: url(images/advocacy.gif);
}
#third a {
height: 167px;
width: 130px;
position: absolute;
left: 324px;
top: 62px;
}
#third a:link, #third a:visited {
background-image: url(images/marketingup.jpg);
}
#third a:hover, #third a:active {
background-image: url(images/marketingdown.jpg);
}
#section-third #third a
{
background-image: url(images/marketingdown.jpg);
}
#section-third #menubox
{
background-image: url(images/marketing.gif);
}
#fourth a {
height: 242px;
width: 140px;
position: absolute;
left: 454px;
top: 62px;
}
#fourth a:link, #fourth a:visited {
background-image: url(images/artup.jpg);
}
#fourth a:hover, #fourth a:active {
background-image: url(images/artdown.jpg);
}
#section-fourth #fourth a
{
background-image: url(images/artdown.jpg);
}
#section-fourth #menubox
{
background-image: url(images/art.gif);
}
#fifth a {
height: 187px;
width: 170px;
position: absolute;
top: 62px;
left: 594px;
}
#fifth a:link, #fifth a:visited {
background-image: url(images/videographyup.jpg);
}
#fifth a:hover, #fifth a:active {
background-image: url(images/videographydown.jpg);
}
#section-fifth #fifth a
{
background-image: url(images/videographydown.jpg);
}
#section-fifth #menubox
{
background-image: url(images/videography.gif);
}
#homeshadow {
height: 62px;
width: 15px;
top:0px;
left:164px;
background-image: url(images/homeshadow.gif);
position: absolute;
}
#fourthshadow {
height: 71px;
width: 19px;
position: absolute;
left: 594px;
top: 249px;
background-image: url(images/fourthshadow.gif);
}
#menubox {
height: 91px;
width: 454px;
left: 0px;
bottom: 0px;
position: absolute;
}

Granted that's not the complete code, but it is what pertains to my problem.

[edited by: Fotiman at 8:34 pm (utc) on Aug. 18, 2008]
[edit reason] Examplified to hide site specifics. [/edit]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 7:10 am May 14, 2026