GIDForums  

Go Back   GIDForums > Webmaster Forums > Web Design Forum
Reload this Page JavaScript Link Description On Mouse Over
User Name
Password
Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

 
 
Thread Tools Search this Thread Rate Thread
  #1  
Old 28-Jun-2004, 00:12
BobbyDouglas's Avatar
BobbyDouglas BobbyDouglas is offline
Regular Member
  
Join Date: Aug 2003
Posts: 789
BobbyDouglas has a spectacular aura aboutBobbyDouglas has a spectacular aura about

JavaScript Link Description On Mouse Over

Im am trying to setup a script that will accomplish the task of displaying text inside of a <td> when the user mouse overs the image. It is easier to explain when you have an actual layout to view.

Here is the code for the layout. The top row just contains a bunch of images. (Home/Registration/Testimonials/Ect).

HTML Code:
<table border="0" cellpadding="0" cellspacing="0" width="747">
  <tr>
    <td colspan="2" width="121" height="23">
	<img src="../images/Home_on.gif" alt="" width="121" height="23"></td>
    <td width="8" height="23">&nbsp;</td>
    <td width="121" height="23">
	<img src="../images/Registration_Off.gif" alt="" width="121" height="23"></td>
    <td width="8" height="23">&nbsp;</td>
    <td width="121" height="23">
	<img src="../images/Testimonials_off.gif" alt="" width="121" height="23"></td>
    <td width="8" height="23">&nbsp;</td>
    <td width="121" height="23">
	<img src="../images/Feature_Request_off.gif" alt="" width="121" height="23"></td>
    <td width="8" height="23">&nbsp;</td>
    <td width="121" height="23">
	<img src="../images/Report_Problem_off.gif" alt="" width="121" height="23"></td>
    <td width="8" height="23">&nbsp;</td>
    <td width="112" colspan="2" height="23">
	<img src="../images/AboutD2D_off.gif" alt="" width="121" height="23"></td>
  </tr>
  <tr>
    <td colspan="13" bgcolor="#3F698E" width="757">
    <img border="0" src="../images/header_bar_spacer.gif" width="1" height="4"></td>
  </tr>
  <tr>
    <td background="../images/header_bot_repeat.gif" height="22">
    <img border="0" src="../images/header_bot_left.gif" width="13" height="22"></td>
    <td width="632" background="../images/header_bot_repeat.gif" colspan="10" height="22">
    When you mouse over Home_on.gif, this text inside of here should change.</td>
    <td width="112" background="../images/header_bot_repeat.gif" height="22">&nbsp;</td>
    <td width="13" height="22">
    <img border="0" src="../images/header_bot_right.gif" width="13" height="22"></td>
  </tr>
</table>

Anyone have an idea of a script I could use for this? It needs to work in IE and NS.

It is similar to the left side of http://www.meyerweb.com/eric/css/edge/popups/demo.html, but in Javascript, and using images.

rosanda used it on their old template for the template archive web site, however it is not longer their when I went to the site
__________________
Mr. Bob's Web Design - Tirelessly looking for ways to enhance the customer base of your business.
Last edited by JdS : 28-Jun-2004 at 09:54. Reason: Please insert [html] & [/html] tags between your example HTML codes
  #2  
Old 28-Jun-2004, 10:57
JdS's Avatar
JdS JdS is offline
Senior Member
  
Join Date: Aug 2001
Location: KUL, Malaysia
Posts: 3,371
JdS will become famous soon enough
Yes, we discussed something similar a long time ago: http://www.gidforums.com/t-467.html. You can use the same principle explained on that thread to this issue with what you're trying to do...

I copied your example code and modified it a bit and it seems to be working quite well:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Links</title>
<link rel="stylesheet" href="ssmitems.css" type="text/css" />
<!-- insert the javascript functions -->
<script type="text/javascript">
<!--
  function show( id )
  {
    document.getElementById(id).style.display = 'block';
  }

  function hide( id )
  {
    document.getElementById(id).style.display = 'none';
  }
//-->
</script>
<!-- Insert the default/onload hidden class -->
<style type="text/css">
<!--
div.hidden { display:none; }
-->
</style>
</head>                    
<body>
<table border="0" cellpadding="0" cellspacing="0" width="747">
  <tr>
    <td colspan="2" width="121" height="23" onmouseover="show('hom');" onmouseout="hide('hom');">
		<img src="../images/Home_on.gif" alt="" width="121" height="23" />
	</td>
    <td width="8" height="23">&nbsp;</td>
    <td width="121" height="23" onmouseover="show('reg');" onmouseout="hide('reg');">
		<img src="../images/Registration_Off.gif" alt="" width="121" height="23" />
	</td>
    <td width="8" height="23">&nbsp;</td>
    <td width="121" height="23" onmouseover="show('tes');" onmouseout="hide('tes');">
		<img src="../images/Testimonials_off.gif" alt="" width="121" height="23" />
	</td>
    <td width="8" height="23">&nbsp;</td>
    <td width="121" height="23" onmouseover="show('fea');" onmouseout="hide('fea');">
		<img src="../images/Feature_Request_off.gif" alt="" width="121" height="23" />
	</td>
    <td width="8" height="23">&nbsp;</td>
    <td width="121" height="23" onmouseover="show('rep');" onmouseout="hide('rep');">
		<img src="../images/Report_Problem_off.gif" alt="" width="121" height="23" />
	</td>
    <td width="8" height="23">&nbsp;</td>
    <td width="112" colspan="2" height="23" onmouseover="show('abo');" onmouseout="hide('abo');">
		<img src="../images/AboutD2D_off.gif" alt="" width="121" height="23" />
	</td>
  </tr>
  <tr>
    <td colspan="13" bgcolor="#3F698E" width="757">
    <img border="0" src="../images/header_bar_spacer.gif" width="1" height="4"></td>
  </tr>
  <tr>
    <td background="../images/header_bot_repeat.gif" height="22">
    <img border="0" src="../images/header_bot_left.gif" width="13" height="22"></td>
    <td width="632" background="../images/header_bot_repeat.gif" colspan="10" height="22">
		<div id="hom" class="hidden">Something about HOME Here.</div>
		<div id="reg" class="hidden">Something about REGISTRATION Here.</div>
		<div id="tes" class="hidden">Something about TESTIMONIAL Here.</div>
		<div id="fea" class="hidden">Something about FEATURES Here.</div>
		<div id="rep" class="hidden">Something about REPORT Here.</div>
		<div id="abo" class="hidden">Something about ABOUT Here.</div>
	</td>
    <td width="112" background="../images/header_bot_repeat.gif" height="22">&nbsp;</td>
    <td width="13" height="22">
    <img border="0" src="../images/header_bot_right.gif" width="13" height="22"></td>
  </tr>
</table>
</body>
</html>

Let me know if it doesn't...
  #3  
Old 28-Jun-2004, 11:36
BobbyDouglas's Avatar
BobbyDouglas BobbyDouglas is offline
Regular Member
  
Join Date: Aug 2003
Posts: 789
BobbyDouglas has a spectacular aura aboutBobbyDouglas has a spectacular aura about
You da man!
__________________
Mr. Bob's Web Design - Tirelessly looking for ways to enhance the customer base of your business.
  #4  
Old 28-Jun-2004, 17:27
JdS's Avatar
JdS JdS is offline
Senior Member
  
Join Date: Aug 2001
Location: KUL, Malaysia
Posts: 3,371
JdS will become famous soon enough
Don't be impressed, this is the ONLY snippet of JavaScript I have ever had the patience to figure out... this and that document.write() thingy!
 
« Previous Thread | Next Thread »

Recent GIDBlogThe bogus security of airport screening by crystalattice

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
We're looking for JavaScript codes / mini tutorials. JdS Web Design Forum 7 31-Mar-2008 23:25
[Program/Tutorial] RandMouse aaroncohn C Programming Language 5 17-Dec-2004 19:22
JavaScript Tutorial Part 1 pcxgamer Web Design Forum 2 01-Dec-2003 09:16
list of the most common keyboard and mouse shortcuts for IE, Opera and Firebird jrobbio Computer Software Forum - Windows 2 04-Sep-2003 09:10
This JavaScript doesn't work on Mozilla. JdS Web Design Forum 8 02-Jul-2003 14:08

Network Sites: GIDNetwork · GIDWebHosts · GIDSearch · Learning Journal by J de Silva, The

All times are GMT -6. The time now is 15:09.

Contact Us - GIDForums™ - Archive - Top

vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.