Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Changing image and description with onclick

Status
Not open for further replies.
tilmant

tilmant

IS-IT--Management
Jul 11, 2001
10
US
I'm trying to make a simple image switch where I have images in one table and when they click on the image it puts a larger image in the second table. That all works fine using the name value. Now I what a description of the image to be placed in another table but can not figure out how to reference it with a single onclick command. Here is my code:

<body>
<table width="740" border="0">
<tr>
<td width="130">
<img src="image01.gif" width="130" height="100" onClick="document.images ['view'].src='image01lg.gif';" /><br />
<img src="image02.gif" width="130" height="100" onClick="document.images ['view'].src='image02lg.gif';" /><br />
<img src="image03.gif" width="130" height="100" onClick="document.images ['view'].src='image03lg.gif';" /><br />
<img src="image04.gif" width="130" height="100" onClick="document.images ['view'].src='image04lg.gif';" /><br />
<img src="image05.gif" width="130" height="100" onClick="document.images ['view'].src='image05lg.gif';" />
</td>
<td width="480" valign="top"><table width="100%" border="0">
<tr>
<td><div align="center"><span class="style1">Virtual Garage Sale </span></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><table width="100%" border="0">
<tr>
<td width=300>
<img border="1" src="selectpic.gif" width="300" height="225" title="This is a title" name="view"> </td>
<td width=>
######DESCRIPTION GOES HERE#####
</td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
<td width="130" valign="top">
<img src="image06.gif" width="130" height="100" onClick="document.images ['view'].src='image06lg.gif';" /><br />
<img src="image07.gif" width="130" height="100" onClick="document.images ['view'].src='image07lg.gif';" /><br />
<img src="image08.gif" width="130" height="100" onClick="document.images ['view'].src='image08lg.gif';" /><br />
<img src="image09.gif" width="130" height="100" onClick="document.images ['view'].src='image09lg.gif';" /><br />
<img src="image10.gif" width="130" height="100" onClick="document.images ['view'].src='image10lg.gif';" />
</td>
</tr>
</table>
</body>
</html>

Thanks
 
Sort by date Sort by votes
give the description td an id and change it's text using innerHTML:

Code: 
<html>
<body>
<table width="740" border="0">
  <tr>
    <td width="130">
        <img src="image01.gif" width="130" height="100" onClick="document.images ['view'].src='image01lg.gif';[b][COLOR=red]document.getElementById('desc').innerHTML='I am a description'[/color][/b]" /><br />
        <img src="image02.gif" width="130" height="100" onClick="document.images ['view'].src='image02lg.gif';[b][COLOR=red]document.getElementById('desc').innerHTML='I am a description'[/color][/b]" /><br />
        <img src="image03.gif" width="130" height="100" onClick="document.images ['view'].src='image03lg.gif';[b][COLOR=red]document.getElementById('desc').innerHTML='I am a description'[/color][/b]" /><br />
        <img src="image04.gif" width="130" height="100" onClick="document.images ['view'].src='image04lg.gif';[b][COLOR=red]document.getElementById('desc').innerHTML='I am a description'[/color][/b]" /><br />
        <img src="image05.gif" width="130" height="100" onClick="document.images ['view'].src='image05lg.gif';[b][COLOR=red]document.getElementById('desc').innerHTML='I am a description'[/color][/b]" />    
    </td>
    <td width="480" valign="top"><table  width="100%" border="0">
      <tr>
        <td><div align="center"><span class="style1">Virtual Garage Sale </span></div></td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td><table width="100%" border="0">
          <tr>
            <td width=300>
        <img border="1" src="selectpic.gif" width="300" height="225" title="This is a title"  name="view">            </td>
            <td [b][COLOR=red]id="desc"[/color][/b]>
        ######DESCRIPTION GOES HERE#####    
        </td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
    <td width="130" valign="top">
        <img src="image06.gif" width="130" height="100" onClick="document.images ['view'].src='image06lg.gif';[b][COLOR=red]document.getElementById('desc').innerHTML='I am a description'[/color][/b]" /><br />
        <img src="image07.gif" width="130" height="100" onClick="document.images ['view'].src='image07lg.gif';[b][COLOR=red]document.getElementById('desc').innerHTML='I am a description'[/color][/b]" /><br />
        <img src="image08.gif" width="130" height="100" onClick="document.images ['view'].src='image08lg.gif';[b][COLOR=red]document.getElementById('desc').innerHTML='I am a description'[/color][/b]" /><br />
        <img src="image09.gif" width="130" height="100" onClick="document.images ['view'].src='image09lg.gif';[b][COLOR=red]document.getElementById('desc').innerHTML='I am a description'[/color][/b]" /><br />
        <img src="image10.gif" width="130" height="100" onClick="document.images ['view'].src='image10lg.gif';[b][COLOR=red]document.getElementById('desc').innerHTML='I am a description'[/color][/b]" />    
    </td>
  </tr>
</table>
</body>
</html>

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Upvote 0 Downvote
Works, Thanks, one more question. If I wanted to have the onclick command fill in a form textarea, what would be the document command? Is there a good place on the web that can describe the document object and all the components?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
297
rogerte
rogerte
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
108
feherke
feherke
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
325
AbidingDude
AbidingDude
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
107
ggriffit
ggriffit
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
236
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top