Text/Image swap with hyperlinks

  • raestanton
  • Newbie
  • Newbie
  • raestanton
  • Posts: 5

Post 3+ Months Ago

Hi there ... I found some code posted here from a few years ago which i have adapted for my own use (thanks to hacker007). what i am now trying to achieve is to include a link to the web address (specified in ClientData2) from the image as well as the text at ClientInfo2 ... any suggestions would be much appreciated.

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
 
var clientData1 = new Array();
var clientData2 = new Array();
var clientImage = new Array();
clientData1[1] = "Client 1";
clientData2[1] = "www.client1.com.au";
clientImage[1] = "/images/client1.gif";
clientData1[2] = "Client 2";
clientData2[2] = "www.client2.com.au";
clientImage[2] = "images/client2.gif";
clientData1[3] = "Client 3";
clientData2[3] = "www.client3.com.au";
clientImage[3] = "images/client3.gif";
 
var clientId
function swapText(clientId) {
document.getElementById("clientInfo1").innerHTML = clientData1[clientId];
document.getElementById("clientInfo2").innerHTML = clientData2[clientId];
}
function swapImage(clientId) {
document.clientImagePlace.src = clientImage[clientId];
document.clientImagePlace.alt = clientImage[clientId];
 
}
</script>
</head>
 
<body>
<table width="100%">
<tr>
        <td>
          <table width="218" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="javascript&#058; swapText(1);swapImage(1);"><img src="images/client1_th.gif" width="60" height="60" class="image" /></a></td>
    <td><a href="javascript&#058; swapText(2);swapImage(2);"><img src="images/client2_th.gif" width="60" height="60" class="image" /></a></td>
    <td><a href="javascript&#058; swapText(3);swapImage(3);"><img src="images/client3_th.gif" width="60" height="60" class="image" /></a></td>
  </tr>
</table>
<td>
<img src="images/client1.gif" name="clientImagePlace" width="500" height="365"><br>
<span id="clientInfo1">Client 1</span>
<br><span id="clientInfo2">www.client1.com.au</span>
</td>
</tr>
</table></body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.                       "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <script type="text/javascript">
  6.  
  7. var clientData1 = new Array();
  8. var clientData2 = new Array();
  9. var clientImage = new Array();
  10. clientData1[1] = "Client 1";
  11. clientData2[1] = "www.client1.com.au";
  12. clientImage[1] = "/images/client1.gif";
  13. clientData1[2] = "Client 2";
  14. clientData2[2] = "www.client2.com.au";
  15. clientImage[2] = "images/client2.gif";
  16. clientData1[3] = "Client 3";
  17. clientData2[3] = "www.client3.com.au";
  18. clientImage[3] = "images/client3.gif";
  19.  
  20. var clientId
  21. function swapText(clientId) {
  22. document.getElementById("clientInfo1").innerHTML = clientData1[clientId];
  23. document.getElementById("clientInfo2").innerHTML = clientData2[clientId];
  24. }
  25. function swapImage(clientId) {
  26. document.clientImagePlace.src = clientImage[clientId];
  27. document.clientImagePlace.alt = clientImage[clientId];
  28.  
  29. }
  30. </script>
  31. </head>
  32.  
  33. <body>
  34. <table width="100%">
  35. <tr>
  36.         <td>
  37.           <table width="218" border="0" cellspacing="0" cellpadding="0">
  38.   <tr>
  39.     <td><a href="javascript&#058; swapText(1);swapImage(1);"><img src="images/client1_th.gif" width="60" height="60" class="image" /></a></td>
  40.     <td><a href="javascript&#058; swapText(2);swapImage(2);"><img src="images/client2_th.gif" width="60" height="60" class="image" /></a></td>
  41.     <td><a href="javascript&#058; swapText(3);swapImage(3);"><img src="images/client3_th.gif" width="60" height="60" class="image" /></a></td>
  42.   </tr>
  43. </table>
  44. <td>
  45. <img src="images/client1.gif" name="clientImagePlace" width="500" height="365"><br>
  46. <span id="clientInfo1">Client 1</span>
  47. <br><span id="clientInfo2">www.client1.com.au</span>
  48. </td>
  49. </tr>
  50. </table></body>
  51. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • dark_lord
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: India-Kolkata

Post 3+ Months Ago

What i understand is that you need to place a link inside table elements?
so you need to change this
Code: [ Select ]
 
<td><a href="javascript&#058; swapText(1);swapImage(1);"><img src="images/client1_th.gif" width="60" height="60" class="image" /></a></td>
 
  1.  
  2. <td><a href="javascript&#058; swapText(1);swapImage(1);"><img src="images/client1_th.gif" width="60" height="60" class="image" /></a></td>
  3.  

to
Code: [ Select ]
 
<td><a href="your_link" target="_blank"><span onclick="swapText(1);swapImage(1);"><img src="images/client1_th.gif" width="60" height="60" class="image" /></span></a></td>
 
  1.  
  2. <td><a href="your_link" target="_blank"><span onclick="swapText(1);swapImage(1);"><img src="images/client1_th.gif" width="60" height="60" class="image" /></span></a></td>
  3.  

I hope this works, cos i didn't try it. :D Maybe you are required to change the JavaScript but i think this is the only way to place a link!
If the above works then it will be similar for the text one too

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 98 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.