Client Side Things
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Codewalkers Forums > Other Technologies > Client Side Things
Reload this Page

help with image rollover script

Discuss help with image rollover script in the Client Side Things forum on Codewalkers.
help with image rollover script Here is a place to talk and ask questions about HTML, CSS, Javascript, and other client side technologies.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Codewalkers Forums Sponsor:
  #1  
Old July 21st, 2004, 09:37 PM
Anonymous Anonymous is offline
Registered User
Codewalkers God 35th Plane (22000 - 22499 posts)
  
Join Date: Apr 2007
Posts: 22,309 Anonymous User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 24
help with image rollover script
I have written a javascript to do image rollover on my site however the script is changing the worng image, sometimes and works fine other times.

Below is the souces code to one page of my site. If you could please tell me what is worng I would be very thankful to you.

alright here the code
php Code:
Original - php Code 
  1. <HTML>
  2. <Head>
  3. <BASE HREF="http://69.76.174.153/~chris/">
  4. <Title>Bat ;; Pictures</Title>
  5. <link REL="shortcut icon" HREF="images/Chris.ico">
  6. <link REL=stylesheet HREF="./style_sheet.css" TYPE="text/css">
  7.  
  8. <!-- below is the javacode for image rollover -->
  9. <SCRIPT LANGUAGE="JavaScript">
  10. function hover(name,image,over)
  11. {
  12.   if(window.document.images)
  13.   {
  14.     if (over)
  15.       window.document.images[name].src = "images/" + image + "_rollover.gif";
  16.     else
  17.       window.document.images[name].src = "images/" + image + ".gif";
  18.   }
  19. }
  20. </script>
  21. </header>
  22. <Body BGCOLOR="#000000">
  23. <CENTER>
  24. <table cellpadding="0" cellspacing="0" border="0">
  25.  
  26.     <tr>
  27.       <td width="630" style="vertical-align: top;">
  28.        <table cellpadding="0" cellspacing="0" border="0">
  29.  
  30.           <tr>
  31.           <td width="630" style="vertical-align: top;">
  32.         <!-- This is the Where the header Code goes -->
  33.         <img src="images/header-2.gif">
  34.         <!-- Below is the code for the toolbar -->
  35.  
  36.                 <Table cellpadding="0" cellspacing="0" border="0">
  37.          <tr>
  38.            <td>
  39.              <img BORDER="0" name="lt_end" src="images/lt_end.gif">
  40.            </td>
  41.            <td>
  42.              <a href="index.php" onMouseOver="hover('home','home',true)" onMouseOut="hover('home','home',false)"><img name="home" src="images/home.gif" border=0></a>
  43.            </td>
  44.            <td>
  45.  
  46.              <img BORDER="0" name="spacer" src="images/spacer.gif">
  47.            </td>
  48.            <td>
  49.              <a href="pictures/" onMouseOver="hover('pictures','pictures',true)" onMouseOut="hover('pictures','pictures',false)"><img name="pictures" src="images/pictures.gif" border=0></a>
  50.            </td>
  51.            <td>
  52.              <img BORDER="0" src="images/middle.gif">
  53.            </td>
  54.            <td>
  55.  
  56.              <a href="staff/" onMouseOver="hover('staff','staff',true)" onMouseOut="hover('staff','staff',false)"><img name="staff" src="images/staff.gif" border=0></a>
  57.            </td>
  58.            <td>
  59.              <img BORDER="0" name="rt_end" src="images/rt_end.gif">
  60.            </td>
  61.          </tr>
  62.         </Table>        <!-- Above is the code for the toolbar -->
  63.       </td>
  64.  
  65.           </tr>
  66.  
  67.           <tr>
  68.             <td width="630" style="vertical-align: top;">
  69.         <table Border="0">
  70.   <tr>
  71.     <td width="300" style="vertical-align: top;">
  72.       <table>
  73.         <tr>
  74.  
  75.           <td>
  76.            <img name="fire1" src="images/fire.gif">
  77.           </td>
  78.           <td>
  79.             <img name="title" src="images/Stone.jpg">
  80.           </td>
  81.            <td>
  82.         <img name="fire2" src="images/fire.gif">
  83.       </td>
  84.  
  85.     </tr>
  86.       </table>
  87.       <p>...</p>
  88.     </td>
  89.     <td width="330" style="vertical-align: top;"><br>
  90.     <center><Font Size="7" Color="#FFFFFF">Galleries</font><br>
  91.       <table border="1"CELLPADDING='0" CELLSPACING='0 BORDERCOLOR="1A1A1A">
  92.     <tr>
  93.  
  94.       <td width="165" style="vertical-align: top;">
  95.  
  96.        <!-- First column of galleries -->
  97.         &nbsp;<img name="01" src="images/rd_ball.gif" border="0"><a href="pictures/index.php?gallery=CAD" onMouseOver="hover('01','rd_ball',true);" onMouseOut="hover('01','rd_ball',false);" class="l">CAD</a><br>
  98.         &nbsp;<img name="02" src="images/rd_ball.gif" border="0"><a href="pictures/index.php?gallery=rimes" onMouseOver="hover('02','rd_ball',true);" onMouseOut="hover('02','rd_ball',false);" class="l">LeAnn Rimes</a><br>
  99.         &nbsp;<img name="03" src="images/rd_ball.gif" border="0"><a href="pictures/index.php?gallery=mccann" onMouseOver="hover('03','rd_ball',true);" onMouseOut="hover('03','rd_ball',false);" class="l">Lila McCann</a><br>
  100.         &nbsp;<img name="04" src="images/rd_ball.gif" border="0"><a href="pictures/index.php?gallery=me" onMouseOver="hover('04','rd_ball',true);" onMouseOut="hover('04','rd_ball',false);" class="l">Me</a><br>
  101.  
  102.         &nbsp;<img name="05" src="images/rd_ball.gif" border="0"><a href="pictures/index.php?gallery=paintball" onMouseOver="hover('05','rd_ball',true);" onMouseOut="hover('05','rd_ball',false);" class="l">Paintball</a><br>
  103.       </td>
  104.       <td width="165" style="vertical-align: top;">
  105.        <!-- Second column of galleries -->
  106.         &nbsp;<img name="06" src="images/rd_ball.gif" border="0"><a href="pictures/index.php?gallery=space" onMouseOver="hover('06','rd_ball',true);" onMouseOut="hover('06','rd_ball',false);" class="l">Space</a><br>
  107.         &nbsp;<img name="07" src="images/rd_ball.gif" border="0"><a href="pictures/index.php?gallery=spiderman" onMouseOver="hover('07','rd_ball',true);" onMouseOut="hover('07','rd_ball',false);" class="l">Spiderman</a><br>
  108.         &nbsp;<img name="08" src="images/rd_ball.gif" border="0"><a href="pictures/index.php?gallery=startrek" onMouseOver="hover('08','rd_ball',true);" onMouseOut="hover('08','rd_ball',false);" class="l">Star Trek</a><br>
  109.  
  110.         &nbsp;<img name="09" src="images/rd_ball.gif" border="0"><a href="pictures/index.php?gallery=wallpapers" onMouseOver="hover('09','rd_ball',true);" onMouseOut="hover('09','rd_ball',false);" class="l">Wallpapers</a><br>
  111.         &nbsp;<img name="10" src="images/rd_ball.gif" border="0"><a href="pictures/index.php?gallery=misc" onMouseOver="hover('10','rd_ball',true);" onMouseOut="hover('10','rd_ball',false);" class="l">Misc.</a><br>
  112.       </td>
  113.     </tr>
  114.       </table>
  115.     </td>
  116.   </tr>
  117. </table>
  118. ....
  119.  
  120. </Body>
  121. </HTML>
Reply With Quote
  #2  
Old July 21st, 2004, 09:50 PM
Blindeddie Blindeddie is offline
Codewalkers Regular (2000 - 2499 posts)
  
Join Date: Apr 2007
Location: NJ - USA
Posts: 2,152 Blindeddie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 4
RE: help with image rollover script
could you be specific as to what images are loading incorrectly?
Reply With Quote
  #3  
Old July 22nd, 2004, 12:40 AM
Anonymous Anonymous is offline
Registered User
Codewalkers God 35th Plane (22000 - 22499 posts)
  
Join Date: Apr 2007
Posts: 22,309 Anonymous User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 24
RE: help with image rollover script
I will try. but in differnt boswers it is differnt images. I will use the images name to diecripe what happends when using ie (which is the boswer that mess it up the most). Well if you where to move the mouse over the link named CAD, the image named 01 should change, however the image named lt_end changes, and so on.

I hope this is more clear.
Reply With Quote
  #4  
Old July 22nd, 2004, 11:42 AM
Blindeddie Blindeddie is offline
Codewalkers Regular (2000 - 2499 posts)
  
Join Date: Apr 2007
Location: NJ - USA
Posts: 2,152 Blindeddie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 4
RE: help with image rollover script
Looking at your code, I am thinking that the problem may be that you image names are numbers (01,02,03) What may be happening is that IE is using the name as an index, not actually the name, so IE may be changing the image with index 1 whne you mouse over 01 and that would be the lt_end image. This is just a guess, but try changing the image names to "one", "two" etc instead of using numbers. Let me know how it goes
Reply With Quote
  #5  
Old July 22nd, 2004, 05:12 PM
Anonymous Anonymous is offline
Registered User
Codewalkers God 35th Plane (22000 - 22499 posts)
  
Join Date: Apr 2007
Posts: 22,309 Anonymous User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 24
RE: help with image rollover script
Thanks for your help that fixed my problem
Reply With Quote
Reply

Viewing: Codewalkers Forums > Other Technologies > Client Side Things > help with image rollover script

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
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 On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support |