1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

HTML/Javascript help needed

Discussion in 'JavaScript' started by damagician, Jan 30, 2005.

  1. #1
    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. :D
     
    damagician, Jan 30, 2005 IP
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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:

    <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>
    Code (markup):
    J.D.
     
    J.D., Jan 30, 2005 IP
  3. damagician

    damagician Guest

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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??
     
    damagician, Jan 30, 2005 IP
  4. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.

    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">
    Code (markup):
    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.
     
    J.D., Jan 30, 2005 IP
  5. damagician

    damagician Guest

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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 :confused:

    <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>
    Code (markup):
    Thanks in advance to anyone who can help clear this up :) :eek: :)

    P.S. As I couldn't get the sidepic to change yet I haven't even tried to add in anything for the middlepic.
     
    damagician, Jan 31, 2005 IP
  6. marty

    marty Peon

    Messages:
    154
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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"> <!-- body { background-color: #000000; } --> </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
     
    marty, Apr 1, 2005 IP