JavaScript and Animated Buttons?

StarGateSG-1 · **Posted:** Wed Mar 08, 2006 9:46 am

I am having a problem with making my buttons work. The first ones shows but then when it chnages it becomes an image error, but it alos won't change back after.

Here is the code:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<html>

<head>

<link rel="stylesheet" type="text/css"
href="mystyle.css" />

<style type="text/css">

h1 {color: black;text-align: center}

</style>

<script type="text/javascript">

factionsimg=0
galleryimg=0
linksimg=0

function highlight_factions()
{
if (factionsimg==0)
{
factionsimg=1
document.getElementById('factionsimg').src="Images\Buttons\Button_over_Factions.jpg"
}
else
{
factionsimg=0
document.getElementById('factionsimg').src="Images\Buttons\Button_up_Factions.jpg"
}
}

function highlight_Gallery()
{
if (galleryimg==0)
{
galleryimg=1
document.getElementById('galleryimg').src="Images\Buttons\Button_over_Gallery.jpg"
}
else
{
galleryimg=0
document.getElementById('galleryimg').src="Images\Buttons\Button_up_Gallery.jpg"
}
}

function highlight_Links()
{
if (linksimg==0)
{
linksimg=1
document.getElementById('linksimg').src="Images\Buttons\Button_over_Links.jpg"
}
else
{
linksimg=0
document.getElementById('linksimg').src="Images\Buttons\Button_up_Links.jpg"
}
}
</script>

</script>

<title>Battle For Middle Earth II - Home</title>

</head>

<body>
<img src="Images\LotR_header.jpg" alt="Header Picture" align="middle"
height="200" width="770"/>

<img id="factionsimg" onmouseout="highlight_factions()"
onmouseover="highlight_factions()" src="Images\Buttons\Button_up_Factions.jpg"
alt="Factions Page" align="left" height="39" width="178" border="0"/>

<img id="galleryimg" onmouseout="highlight_Gallery()"
onmouseover="highlight_Gallery()" src="Images\Buttons\Button_up_Gallery.jpg"
alt="Factions Page" align="left" height="39" width="178" border="0"/>

<img id="linksimg" onmouseout="highlight_Links()"
onmouseover="highlight_Links()" src="Images\Buttons\Button_up_Links.jpg"
alt="Factions Page" align="left" height="39" width="178" border="0"/>

</body>

</html

>

I am adding the Images through Image shack and you must make the folders yourself, but I will tell you how.

You must put the Html code in a text file, call it whatever, in the same folder place a Images folder (must be spelled right) then in the Images folder place a folder called Buttons and then place all the buttons in there.

Make sure to save the Images as follows:

Button_down_Factions.jpg
http://img358.imageshack.us/img358/1801/buttondownfactions1bj.jpg

Button_down_Gallery.jpg
http://img311.imageshack.us/img311/2497/buttondowngallery9du.jpg

Button_down_Links.jpg
http://img358.imageshack.us/img358/2193/buttondownlinks9ko.jpg

Button_over_Factions.jpg
http://img358.imageshack.us/img358/3056/buttonoverfactions9rr.jpg

Button_over_Gallery.jpg
http://img311.imageshack.us/img311/7204/buttonovergallery6vq.jpg

Button_over_Links.jpg
http://img311.imageshack.us/img311/1324/buttonoverlinks5jo.jpg

Button_up_Factions.jpg
http://img311.imageshack.us/img311/2516/buttonupfactions2cl.jpg

Button_up_Gallery.jpg
http://img358.imageshack.us/img358/507/buttonupgallery9ep.jpg

Button_up_Links.jpg
http://img358.imageshack.us/img358/2876/buttonuplinks1ln.jpg

md · **Posted:** Wed Mar 08, 2006 11:20 am

Ok, so the images are supposed to be links... and when you move the mouse over them the image changes? I'd look into CSS; specifically hover and background-image.

css:

a { background-image: url(image1.png); }
a:hover { background-image: url(image2.png); }

StarGateSG-1 · **Posted:** Wed Mar 08, 2006 1:36 pm

Thank you I will try that method instead.

md · **Posted:** Wed Mar 08, 2006 3:12 pm

Javascript should really be avoided these days. Especially when CSS does everything you are trying to do so much simpler.

StarGateSG-1 · **Posted:** Thu Mar 09, 2006 11:47 am

I tryed the css method and it didn't work at all, could you may be make a demo using my pictures becasue I have spend now three days working on these stupid buttons, I have been using the W3C testing program and it works fine there.

I need to use javascrip here because this is for a course were I have to use xhtml,javascript, and css. I am locked into this sry.

rdrake · **Posted:** Thu Mar 09, 2006 10:26 pm

If you must use JavaScript, then you can rewrite your code much simpler.

code:

Much uglier compared to the CSS method, but it does involve some javascript.

md · **Posted:** Fri Mar 10, 2006 12:20 am

VERY simple and not vailid page that should do what you want.

HTML:

<html><head>
<title>blarg!</title>
<style type='text/css'> a.Rollover, a.Rollever:hover
{
background-color: RGB(255,255,0);
color: RGB(0,0,0);
display: block;
text-decoration: none;
border: 1px solid RGB(220,220,220);
width: 100px;
height: 25px;
}
a.Rollover:hover { background-color: RGB(0,255,255); }
</style></head><body>

<a class='Rollover' href='#'>blarg! 1</a><br/>
<a class='Rollover' href='#'>blarg! 2</a><br/>
<a class='Rollover' href='#'>blarg! 3</a><br/>
<a class='Rollover' href='#'>blarg! 4</a>
</body></html>

If you replace background-color with background-image= url(whatever.png) you can use an image for your backgrounds. I'd recomend using the image only for the background and not for the text; that way if someone's browser doesn't support the background image htey can still see what the text says.

	Computer Science Canada Programming C, C++, Java, PHP, Ruby, Turing, VB Username: Password: Register
Wiki Blog Search Turing Chat Room Members