HTML/Javascript help needed

damagician · #1 Jan 30th 2005, 11:02 am

Hi all, My first post and looking for some help already....

I was on another forum and was given a little Javascript to add to my HTML code in order to get one image on a page to change without affecting the whole page. I would now like to have 2 images change and have tried altering the code but it doesn't seem to work. The code I have been using is as follows:

<a href="javascript:showDetails('middlepic','<img src=images/mepiclarge.gif>')" ><img src="images/mepicsmall.gif" border="0"></a>

This will get the 'middlepic' to change when a user clicks on one of my thumbnails. Now if order to get two images to change I tried adding an extra part to this code like this:

<a href="javascript:showDetails('sidepic','<img src= newzpics/nzmaps/christmap.gif>','middlepic','<img src= newzpics/nzpics/abel.gif><br>Torrent Bay in Abel Tasman National Park')"><img src="newzpics/nzthumbs/abel_t.jpg" border="0" width="59" height="59"></a>

which doesn't work. I have tried changing this around lots and lots but am just not able to get both images to change at once. If anyone here could help out I would be most indepted to you.

J.D. · #2 Jan 30th 2005, 11:28 am

You may think that the showDetails function is common knowledge, but it's not. Anyway, what you have seems to be pretty bad baecause you pass HTML as a parameter - the function probably uses document.write or something similar to output the image (document.write should be avoided when possible). Here's a couple of examples of how you flip images:

Code:

<html><head><title>Image Change Test</title>
<script type="text/javascript">
function changeImage(id){document.getElementById(id).src='http://www.xbox.com/NR/rdonlyres/568C4CA6-58FF-465C-B8E3-74057EC2E7B1/0/spwlmechassault2grn.jpg';}
</script>
</head>

<body>
<a href="javascript:changeImage('img-1')"><img id="img-1" src="http://www.xbox.com/NR/rdonlyres/E913B04B-25C9-44A6-B364-089D6EE4AB63/0/spwlneedforspeedunderground2grn.jpg"></a>
<img id="img-2" onclick="changeImage('img-2')" src="http://www.xbox.com/NR/rdonlyres/E913B04B-25C9-44A6-B364-089D6EE4AB63/0/spwlneedforspeedunderground2grn.jpg">
</body>
</html>

J.D.

damagician · #3 Jan 30th 2005, 1:09 pm

Thanks for the speedy response J.D. I like the cleanness of your code but it's not exactly what I had in mind. This code enables the picture that is clicked on to change but what I want is for a different picture to change. This is a link to a page that I have working at the moment:
.globetrotterz.com/pics/newzealand1.htm

oh I got an error when trying to post the link so i removed the www from the link

Now I have changed the layout and now have a map on the left hand side which I wish to change at the same time as the middle picture. Also I have Re-set the size for the cells so that all the outside images don't move if the picture is higher than it is wide. Maybe the showDetails is needed for this to work as I wish??

J.D. · #4 Jan 30th 2005, 4:17 pm

That's just funny - I made exactly same layout about a couple of years ago and did a similar thing with images :)

Same technique I mentioned will work on any picture - all you need is to find the element and change the value of its src attribute. In your case, give the picture in the middle an id (e.g. viewport-id in the example below) and use this id in a function similar to the one I showed in the example. e.g.

Code:

function showImage(imgurl)
{
   document.getElementById("viewport-id").src = "/images/" + imgurl;
}
...
<img onclick="showImage('img-1.jpg')" src="img-tn-1.jpg">
<img onclick="showImage('img-1.jpg')" src="img-tn-2.jpg">

document.write often will result in a less secure page and should be avoided. It is also less effective, because it requires more processing.

J.D.

damagician · #5 Jan 31st 2005, 12:47 am

Well I'm unfortunately not having much luck with this at all. I really have no idea about the Javascript and I have spent hours trying to get any kind of reaction from my page. When I click on my image it is not showing the main picture. Can you please let me know what I have done wrong (obviously lots of things) and help get this nightmare over with

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--  body {  	background-color: #000000;  }  -->  </style>

<script type="text/javascript">  function showImage(imgurl)
{document.getElementById("sidepic")("middlepic").src= "/images/" + imgurl;  }
</script>

</head>
<body>  <table width="100%"  border="0">
<tr>      

  <td><div align="center" id="sidepic"><img onclick="showImage('img-1.gif')" src="img-tn-1.jpg"></div></td>      
  <td><div align="center" id="middlepic"><img onclick="showImage('img-1.gif')" src="img-tn-1.jpg"></div></td>      
  <td><div align="center"><a href="javascript:showImage('newzpics/nzpics/mud_t.jpg')"><img id="sidepic" src="newzpics/nzthumbs/mud_t.jpg"></a></div></td>
  <td><div align="center"><a href="javascript:showImage('newzpics/nzpics/name.gif')"><img id="sidepic" src="newzpics/nzthumbs/name_t.jpg"></a></div></td>    
</tr>  </table>  </body>  </html>

Thanks in advance to anyone who can help clear this up

P.S. As I couldn't get the sidepic to change yet I haven't even tried to add in anything for the middlepic.

marty · #6 Apr 1st 2005, 10:23 am

Hello damagician,

So I found cut and pasted your code and there were two problems that jumped right out at me.

First:

------------------------------------------------------------

<td>
<div align="center">
<a href="javascript:showImage('newzpics/nzpics/mud_t.jpg')">
<img
id="sidepic" <--
src="newzpics/nzthumbs/mud_t.jpg">
</a>
</div>
</td>
<td>
<div align="center">
<a href="javascript:showImage('newzpics/nzpics/name.gif')">
<img
id="sidepic" <--
src="newzpics/nzthumbs/name_t.jpg">
</a>
</div>
</td>

--------------------------------------------------------

Please note that the id for both of these images is "sidepic". This is going to cause you problems.

Second:

--------------------------------------------------------

this is not correct (although it's interesting)

document.getElementById("sidepic")("middlepic").src= "/images/" + imgurl;

I think your going to need to update each image in their own line as follows:

document.getElementById("sidepic").src= "/images/" + imgurl;
document.getElementById("middlepic").src= "/images/" + imgurl;

--------------------------------------------------------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title>
<style type="text/css">  </style>
<script type="text/javascript">
function showImage(imgurl) {
document.getElementById("sidepic").src= "/images/" + imgurl;
document.getElementById("middlepic").src= "/images/" + imgurl;
}
</script>
</head>
<body>
<table width="100%" border="0">
<tr>
<td>
<div align="center" id="sidepic">
<img onclick="showImage('img-1.gif')" src="img-tn-1.jpg">
</div>
</td>
<td>
<div align="center" id="middlepic">
<img onclick="showImage('img-1.gif')" src="img-tn-1.jpg">
</div>
</td>
<td>
<div align="center">
<a href="javascript:showImage('newzpics/nzpics/mud_t.jpg')">
<img id="sidepic" src="newzpics/nzthumbs/mud_t.jpg">
</a>
</div>
</td>
<td>
<div align="center">
<a href="javascript:showImage('newzpics/nzpics/name.gif')">
<img id="middlepic" src="newzpics/nzthumbs/name_t.jpg">
</a>
</div>
</td>
</tr>
</table>
</body>
</html>

Good Luck

Marty

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Adobe Illustrator Expert Needed!	rhinoplayer	Services	2	Jul 17th 2007 12:11 pm
Help needed 2	moskita	Co-op Advertising Network	0	Dec 16th 2004 1:27 pm
plugins needed?	nhelms	Optigold ISP	1	Nov 23rd 2004 3:31 pm
SEO Services Needed	ResaleBroker	Services	10	Aug 4th 2004 10:28 am
Some feedback needed	Razvan Pop	Websites	7	Jun 14th 2004 10:50 am