PDA

Click to See Complete Forum and Search --> : Rollover Images & Javascript...

Chris_J_W
02-10-2003, 10:59 PM
Hi, I'm relatively new to Javascript, and am trying to put together a series of rollover images for a website I'm working on for a links sidebar type thing. I'll put the code below. I've got a few problems - firstly, the images aren't rolling over, secondly the status bar text isn't showing the message I put in there (ie "Hello" at this stage)...any help on where I'm wrong would be greatly appreciated. Anyway, here's the code...

<HTML>
<BODY BACKGROUND="pics/bg.jpg" BGPROPERTIES="fixed" ONLOAD="preLoad();statusText()">

<A HREF = "index.htm"><IMG NAME="welcImg" onmouseover="RollOn(1)" onmouseout="RollOut(1)" SRC="pics/welcome1.gif" BORDER="0"></A><BR>
<A HREF = "events.htm"><IMG NAME="eventImg" onmouseover="RollOn(2)" onmouseout="RollOut(2)" SRC="pics/events1.gif" BORDER="0"></A><BR><BR>

<SCRIPT language="JavaScript">
status_text();
function status_text()
{
window.status="Hello";
setTimeout("status_text()",1);
}

var n;
function preLoad()
{
welc1=new Image;
welc2=new Image;
welc1.src="pics/welcome1.gif";
welc2.src="pics/welcome2.gif";

event1.src=new Image;
event2.src=new Image;
event1.src="pics/events1.gif";
event2.src="pics/events2.gif
}

function RollOn(n)
{
if (n == 1) {
document.welcImg.src=welc2.src;
}
if (n == 2) {
document.eventImg.src=event2.src
}
}

function RollOff(n)
{
if (n == 1) {
document.image.src=welcImg.src;
}
if (n == 2) {
document.image.src=eventImg.src;
}

}
</SCRIPT>
</BODY>
</HTML>

Thanks again for any help...(I've hopefully attached a text version of the file too if that's any easier to work with...)
pyro
02-10-2003, 11:16 PM
Here is your code all cleaned up. The problem with it was you had a lot errors in the syntax. Anyway, hope this helps...
AH.C
02-10-2003, 11:22 PM
Have you tried http://www.dynamicdrive.com ?
They have a slew of rollovers that works for practically all browsers.

HTH
Chris_J_W
02-11-2003, 01:40 AM
Thanks heaps for your help thus far - was working perfectly until i tried to add more links/pictures...now the new pictures aren't rolling over - it's going from the default picture to no picture at all for the second 2 links (the first 2 work perfectly)...the code is attached, and below too. I havent made any more syntax errors that i can see.....

<HTML>
<HEAD>
</HEAD>
<BODY BACKGROUND="pics/bg.jpg" BGPROPERTIES="fixed" ONLOAD="preLoad();status_text()">
<A HREF = "index.htm"><IMG NAME="welcImg" ONMOUSEOVER="RollOn(1)" ONMOUSEOUT="RollOut(1)" SRC="pics/welcome1.gif" BORDER="0" ALT="Welcome"></A><BR>
<A HREF = "events.htm"><IMG NAME="eventImg" ONMOUSEOVER="RollOn(2)" ONMOUSEOUT="RollOut(2)" SRC="pics/events1.gif" BORDER="0" ALT="Events"></A><BR>
<A HREF = "history.htm"><IMG NAME="histImg" ONMOUSEOVER="RollOn(3)" ONMOUSEOUT="RollOut(3)" SRC="pics/history1.gif" BORDER="0" ALT="History"></A><BR>
<A HREF = "details.htm"><IMG NAME="detlImg" ONMOUSEOVER="RollOn(4)" ONMOUSEOUT="RollOut(4)" SRC="pics/details1.gif" BORDER="0" ALT="Details"></A><BR>

<SCRIPT language="JavaScript">
function status_text()
{
window.status="The House";
}

function preLoad()
{
welc1=new Image;
welc2=new Image;
welc1.src="pics/welcome1.gif";
welc2.src="pics/welcome2.gif";

event1=new Image;
event2=new Image;
event1.src="pics/events1.gif";
event2.src="pics/events2.gif";

history1=new Image;
history2=new Image;
history1.src="pic/history1.gif";
history2.src="pic/history2.gif";

details1=new Image;
details2=new Image;
details1.src="pic/details1.gif";
details2.src="pic/details2.gif";
}
function RollOn(n)
{
if (n == 1) {
document.welcImg.src=welc2.src;
}
if (n == 2) {
document.eventImg.src=event2.src;
}
if (n == 3) {
document.histImg.src=history2.src;
}
if (n == 4) {
document.detlImg.src=details2.src;
}
}
function RollOut(n)
{
if (n == 1) {
document.welcImg.src=welc1.src;
}
if (n == 2) {
document.eventImg.src=event1.src;
}
if (n == 3) {
document.histImg.src=history1.src;
}
if (n == 3) {
document.detlImg.src=details1.src;
}
}
</SCRIPT>
</BODY>
</HTML>
pyro
02-11-2003, 07:37 AM
Ok, I see the mistake...

In your last two, where you are preloading the images, you path is wrong. Change

history1=new Image;
history2=new Image;
history1.src="pic/history1.gif";
history2.src="pic/history2.gif";

details1=new Image;
details2=new Image;
details1.src="pic/details1.gif";
details2.src="pic/details2.gif"; to

history1=new Image;
history2=new Image;
history1.src="pics/history1.gif";
history2.src="pics/history2.gif";

details1=new Image;
details2=new Image;
details1.src="pics/details1.gif";
details2.src="pics/details2.gif";

Cheers... :)
AH.C
02-11-2003, 08:44 AM
Depending on your graphics, have you thot of perhaps a single image rollover?

For example, you edit your single image to have a border, i.e. 1px, and make your text, or whatever, transparent. Then by using the Anchor properties, you change the background colors.

Example

With your stylesheet
.rollover A{color: yellow; background-color: blue;}

.rollover A:visited{color: orange; background-color: transparent;}

.rollover A:active{color: lime; background-color: green;}

.rollover A:hover{color: white; background-color: red;}

Then for each image you want to rollover the background, just use something like this;
<span class="rollover"><a href="foo.htm"><img src="Images/foo2.gif" width="100px" height="25px" border="0" alt="Blah, Blah, Blah"></a></span>

That's it, short and sweet. However, you'll have to spend some time with the images to make them look good. This is the route I'm using to keep down on overall bulk.

HTH
Chris_J_W
02-11-2003, 06:21 PM
Thanks heaps again for your replies! I found the problem with that last night, can't believe I didn't see that before! :)