SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru augathra's Avatar
    Join Date
    Jul 2004
    Location
    united states
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onClick (image) show text at bottom of page

    Hi, i am wondering how I could have an image (when clicked) show some text a few lines down in a table. Sort of like this:

    <img src="someimage.gif" onClick="something...?">
    <br><td></tr><tr><td>
    <script type='javascript'>
    document.write("Some stuff about the image clicked");
    </script>

    Thanks

  2. #2
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suspect your best bet would be to give the td an id, then use getElementById() and the innerHTML property to write to it. For instance, if the td has an id of tdOne, this could write to it:

    document.getElementById("tdOne").innerHTML="the string you want to write";

    If you want to add to the end of contents already in the cell, switch the = to +=.

  3. #3
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    table {
    	margin: 40px auto;
    }
    td {
    	width: 150px;
    	height: 150px;
    	text-align: center;
    	padding: 20px;
    }
    td.spacer {
    	height: 10px;
    	padding: 0;
    	background: #eee;
    	border: 1px black solid;
    }
    td.pictext {
    	height: 40px;
    	vertical-align: top;
    	font: normal 8pt verdana;
    	text-align: center;
    }
    td a:link, td a:visited, td a:active {
    	display: block;
    	border: 1px white solid;
    }
    td a:hover {
    	border: 1px black solid;
    }
    td a img {
    	border: none;
    }
    
    </style>
    <script type="text/javascript">
    
    var text = {
    		logo: "This is the SitePoint logo." ,
    		lemons: "...and these are some lemons..Wow." //no trailing comma!
    }
    
    function pictext(what, where)
    {
    	what = text[what];
    	where = document.getElementById(where);
    	while (where.hasChildNodes())
    		where.removeChild(where.lastChild);
    	if (where && what)
    	{
    		what = document.createTextNode(what);
    		where.appendChild(what);
    	}
    }
    
    </script>
    </head>
    <body>
    <table>
          <tbody>
                <tr>
                   <td><a href="#null" onclick="pictext('logo','pictext1')"><img id="logo" title="click me" src="http://www.sitepoint.com/images/sitepoint-logo.gif" /></a></td>
                   <td><a href="#null" onclick="pictext('lemons','pictext2')"><img id="lemons" title="click me" src="http://www.gntusa.com/news_images/july03/summer_newsletter/lemons.jpg" /></a></td>
                </tr>
                <tr>
                   <td class="spacer"></td><td class="spacer"></td>
                </tr>
                <tr>
                   <td class="spacer"></td><td class="spacer"></td>
                </tr>
                <tr>
                   <td class="spacer"></td><td class="spacer"></td>
                </tr>
                <tr>
                   <td id="pictext1" class="pictext"></td><td id="pictext2" class="pictext" colspan="2"></td>
          </tbody>
    </table>
    </body>
    </html>
    Last edited by adios; Sep 20, 2004 at 10:29.
    ::: certified wild guess :::


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •