What's new
By:
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Rollover not working


P

p6

New Member
Messages
2
Likes
0
hi Guys,
I tried my hand at making a couple of rollovers tests. I followed instructions from a loaned book as well as PS's help section and to cut a longish story short they worked using the explorer button within imageready but when i saved them and added them to my site (made with frontpage) and clicked preview as soon as i hovered the mouse over a script error message came up. Anyone know why this may be happening? I'm not sure if i've done something wrong in adobe or if frontpage is the problem - though i have used javascripts before successfully in frontpage. The link below shows the attempt i was trying to get to rollover. Any help needed and appreciated - thanks

http://www.imagesofbritain.com/roll.htm

ps. new poster and sorry if the above seems a bit lengthy
 
Your javascript isn't there. You have the js html code for the button but when you created the buttons in IR you should have some type of code inside <script> </script> tags. This needs to be at the top of your page under the </head> tag.
 
where is the code?

Thanks for answering and i apologize if this is sub newbie but where do i get the code from? Is it automatically created in imageready? I thought i just needed to create the buttons, add slices for each of the states and save as optimized. Obviously not quite as straighforward as i 'd hoped ;-) Hope you can help me again. mike
 
Ok I created a mock button in IR. Here is the code it created:

<!-- ImageReady Preload Script (Untitled-1) -->
<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].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) changeImagesArray(toggleImages.arguments[i+1]);
}
}


var selected = '';
var preloadFlag = false;
function preloadImages() {
if (document.images) {
test_01_over = newImage("images/test_01-over.gif");
preloadFlag = true;
}
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (Untitled-1) -->
<a href="#"
onmouseover="toggleImages('', new Array('test_01', 'images/test_01-over.gif')); return true;"
onmouseout="toggleImages('test_01', new Array('test_01', 'images/test_01-over.gif'), '', new Array('test_01', 'images/test_01.gif')); return true;"
onmousedown="toggleImages('', new Array('test_01', 'images/test_01-over.gif')); return true;"
onmouseup="selected='test_01'; changeImages('test_01', 'images/test_01-over.gif'); return true;">
<img name="test_01" src="images/test_01.gif" width="500" height="500" border="0" alt=""></a>
<!-- End ImageReady Slices -->
</body>

The bold items are the javascript that IR creates which controls how the button acts depending on mouseover, mousedown, etc.

Hope this helps!

You have the html rollover code listed but the top part I have in bold above. This bold area of code is the code that is missing from your page. When you created the rollover it saved an html file. This script is in the file at the top of the page before the body tag <body>. You also should have an image for each change in the rollover state.
 
Back
Top