Log in

View Full Version : Swap images on layout


mushopea
05-17-2006, 11:28 AM
Im currently planning a layout which you can change the images somewhere at the top. Just a relatively small image,not the whole layout image. :o

I DO NOT mean when you mouse over the image changes. I want there to be sort of....navigations? :| like when you press pink a pink image will appear.
Sort of like those background color changes,cept I only want the image to change.

EG:
http://i4.tinypic.com/zwzrk3.png

So, its a demo....(My layout looks something like this. dont mind 2.)
Lets pretend the navigations to change the image are on navigations1.

BEFORE
http://i4.tinypic.com/zwzs7l.png

AFTER:
http://i4.tinypic.com/zwzsle.png
This happens when you click something on Navigations1.

So get it? I dont want the lines to change. only the image....

Thank you~hope you can help me find the script, cos I really couldnt find @___@ *head hurts*

And um, I will draw you something if you help me find such a script!!
???
05-18-2006, 02:26 AM
Try that. In the href="javascript:changeimg()" part, put it the () id of the image then , and the location. Example: href="javascript:changeimg(myimg,myimg.png)"
Copy the pharagraph to make multiepul.(Bad spelling sorry)

<html>
<head>
<script type="text/javascript">
function changeimg(id,loc)
{
document.getElementById(id).src=loc
}
</script>
</head>

<body>
<img id="" src="">
<p><a href="javascript:changeimg()</p>
</body>
</html>

If it doesn't work, i dono. Its the best i can do.
mushopea
05-18-2006, 11:17 PM
Wow, thanks alot. I will try it out and get back to you.
???
05-19-2006, 03:46 AM
Oh sorry the code should be:
<html>
<head>
<script type="text/javascript">
function changeimg(id,loc)
{
document.getElementById(id).src=loc
}
</script>
</head>

<body>
<img id="" src="">
<p><a href="javascript:changeimg()">Change</a></p>
</body>
</html>

Sorry.
???
05-19-2006, 04:08 AM
God. Whats with me? I can't get the code right. This will work, I tryed it.

<html>
<head>
<script type="text/javascript">
function changeimg()
{
document.getElementById('').src=""
}
</script>
</head>

<body>
<img id="" src="">
<p><a href="javascript:changeimg()">Ha</a></p>
</body>
</html>

Ok. In the "" part of document.getElementById('').src="" put the location of the file, and in the ' ' part put the image name. But every time you want a new image change make a new
function changeimg()
{
document.getElementById('').src=""
}
but also change the changeimg to a different name and make a new link with the new function name instead of the change image
<img id="" src="">
<p><a href="javascript: (this part)changeimg(to here)()">Ha</a></p>
Probably doesnt make sense.