onClick="Change Image"

how to

[4x4 webmaster]

I just need a script that will change an image onclick of a menu item.

[edited by: oilman at 4:46 am (utc) on Oct. 9, 2003]
[edit reason] no urls please [/edit]

[henry0]

as is it works fine
but it generates a few error if validating in WC3 transitional
work around: Serve the script from a library

<script type="text/javascript" src= "library/aaaaa.js"></script>
where aaaa.js is the following script
I used that one in a nav bar but it can be used for many purposes

<script type="text/javascript">
function link1Over()
{
document.form1.IMG1.src = 'img/image1.jpg'

</script>


and in body

<a href="index.shtml" name= link1 onMouseOver = "link1Over()"><img src="img/home.jpg" border="0"></a>

[henry0]

forgot to say that the first script changes an img from a secondary location
it requires 2 img to show for ex : a and b, clicking a change b

I think you are looking for that one
just set it in the body

<a href="index2.shtml"
onMouseOver="home.src='../img/home1.jpg'"
onMouseOut="home.src='../img/home.jpg'">
<img name="home" src="../img/home.jpg" width="140" height="20" border="0"></a>

sorry for the confusion

[4x4 webmaster]

now, what if I wanted to have a previous and next button so that when i click on next it opens the next image and so on

[henry0]

in that case the very first script is fine and works very well serve it from a library to deliver a code that validates

[4x4 webmaster]

does it work if I have say 10 images? and what modifications do I have to do to the script. where do I ad the images?

[4x4 webmaster]

Do I add the java script to a file of its own or in the head of my HTML doc? you lost me with that aaaa.js

[henry0]

ok here is a full one just change it to your like

this is in the head

<SCRIPT LANGUAGE= JavaScript>

function link1Over()
{
document.form1.IMG1.src = 'img/image1.jpg'
}

function link2Over()
{
document.form1.IMG1.src = 'img/tom.jpg'
}

function link3Over()
{
document.form1.IMG1.src = 'img/trib.jpg'
}

function link4Over()
{
document.form1.IMG1.src = 'img/out.jpg'
}

function link5Over()
{
document.form1.IMG1.src = 'img/calend.jpg'
}

function link6Over()
{
document.form1.IMG1.src = 'img/ord.jpg'
}

function link7Over()
{
document.form1.IMG1.src = 'img/toques.jpg'
}

function link8Over()
{
document.form1.IMG1.src = 'img/spe.jpg'
}

function link9Over()
{
document.form1.IMG1.src = 'img/gifts.jpg'
}
function link10Over()
{
document.form1.IMG1.src = 'img/food_demo.jpg'
}
function link11Over()
{
document.form1.IMG1.src = 'img/info2.jpg'
}
</SCRIPT>

THEN THIS WILL BE IN THE BODY
Note that extension are shtml in that example it can indeed be html etc.
<a href="index.shtml" name= link1 onMouseOver = "link1Over()"><img src="img/home.jpg" border="0"></a>
<br>
<a href="main/products.shtml" name= link2 onMouseOver = "link2Over()"><img src="img/products.jpg" border="0"></a>
<br>
<a href="main/tributs.shtml" name= link3 onMouseOver = "link3Over()"><img src="img/tributs.jpg" border="0"></a>
<br>
<a href="main/outlets.shtml" name= link4 onMouseOver = "link4Over()"><img src="img/outlets.jpg" border="0"></a>
<br>
<a href="main/calendar.html" name= link5 onMouseOver = "link5Over()"><img src="img/events.jpg" border="0"></a>
<br>
<a href="main/order/order.html" name= link6 onMouseOver = "link6Over()"><img src="img/order.jpg" border="0"></a>
<br>
<a href="main/recipes.html" name= link7 onMouseOver = "link7Over()"><img src="img/recipes.jpg" border="0"></a>
<br>
<a href="main/special.html" name= link8 onMouseOver = "link8Over()"><img src="img/special.jpg" border="0"></a>
<br>
<a href="main/gift.html" name= link9 onMouseOver = "link9Over()"><img src="img/gift.jpg" border="0"></a>
<br>
<a href="demo.html" name= link10 onMouseOver = "link10Over()"><img src="img/demonst.jpg" border="0"></a>
<br>
<a href="main/reqinfo.html" name= link11 onMouseOver = "link11Over()"><img src="img/req_info.jpg" border="0"></a>

NEXT
you can use it as is but with own href and images coding

TO SERVE IT FROM A LIBRARY

ONE
create a folder at root level named =: library
TWO
in head create the lnik to that library folder

<script type="text/javascript"> src= "library/my_script.js"></script>

where my_script.js is that script we previously removed from the head and starting by : function link1Over()

since to call the libray we use the JS script signal you do not need to start the library file by
<SCRIPT LANGUAGE= JavaScript>
neither end it by </script>

last check your DTD
if it says html...something like 4.01
you can use
in any JS script: <SCRIPT LANGUAGE= JavaScript>
if it says transitioanl then youy need:
<script type="text/javascript">

well that's it to it
you could just put together a simple file sample
and experiment with it

hope it helps