Remote Rollover Using Both Text and Images

Hello!

I'm hoping that someone can help me figure out how to create a remote rollover using both text and images. I'm currently using only images, but I'm not happy with the clarity of the text in the rollover.

Is there a way to do the same thing I'm currently doing with images, except replace the remote rollover image with text?  And without using an absolute position (I'm afraid the page will be resized, or browsers will display it differently)?  Basically, I want the rollover to remain the same on the navigation bar (image change), but the remote effect to become text and to appear in the table cell designated for that purpose.

The site in question under development is at http://www.desertrain.us so you can see what I'm trying to accomplish.  

Any help would be greatly appreciated. Thanks!
darkylaAsked:
Who is Participating?
 
mattfairwConnect With a Mentor Commented:
ah ok, thats a bit clearer.

if you set up your tables well enough, and where the img text is showing up now, what you can do is in between the <td>and</td> tags place <div> tags.

when you rollover the menu image, you can use the same javascript function that you were using, except in the function, make the change to a div, instead of making a img appear...

so your div tag will be somethin like:

<div id="info"></div>

then your menu item will be:

<img src="src" onMouseOver="showText('disp')" onMouseOut="showText('hide')">

then the javascript function would be:

<script language="JavaScript">
function showText(which)

if (which == "hide")
  document.getElementById("info").innerHTML = "";
else
  document.getElementById("info").innerHTML = "write the text here you want to display...";
</script>
0
 
mattfairwCommented:
put the script in a div tag, and use the innerHTML method to replace the inside with either the img tag or the text
0
 
mattfairwCommented:
scratch that...i don't believe that is what you mean
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
darkylaAuthor Commented:
Sorry... I'm not sure what you mean.  

I just want to replace the remote rollover image (where all the text appears when you roll over the nav buttons) with actual text. I don't want an image anymore.
0
 
darkylaAuthor Commented:
But... I want to do it without using DHTML that requires an absolute position (which I think will result in text being displayed in the wrong place). I want the text to appear in the <td> cell where the remote rollover image currently appears.
0
 
mattfairwCommented:
goin to lunch, if you have questions, i will be back in a lil over an hour
0
 
darkylaAuthor Commented:
In principle, I understand what's supposed to happen and how it works. In practice, I'm something of an idiot and ask you to take pity on me. :)

Maybe you can tell me what I'm doing wrong? A syntax error perhaps?  Simplified version of page with your suggestion:


<html>
<head>

<script language="JavaScript">

function newImage(arg) {
      if (document.images) {
            rslt = new Image();
            rslt.src = arg;
            return rslt;
      }
}

function changeImages() {
      if (document.images && (preloadFlag == true)) {
            for (var i=0; i<changeImages.arguments.length; i+=2) {
                  document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
            }
      }
}

function showText(which) {
      if(which == "hide"){
        document.getElementById("info").innerHTML = "";
        }
        else {
        document.getElementByID("info").innerHTML = "this is my text to test the script"};
}

var preloadFlag = false;
function preloadImages() {
      if (document.images) {
            menu1_text = newImage("images/home/menu1_text.gif");
            menu1_over = newImage("images/home/menu1-over.gif");
            preloadFlag = true;
      }
}

// -->
</script>
<!-- End Preload Script -->
</head>

<body onload="preloadImages();">

<table border="1">
         <tr>
                  <td background="images/home/home_06.gif" width="200" height="276"><div id="info"></div></td>
               <td><a href="research/research.shtml" target="_self"
                            onmouseover="changeImages('menu1', 'images/home/menu1-over.gif'); showText('disp'); return true;"
                              onmouseout="changeImages('menu1', 'images/home/menu1.gif'); showText('hide'); return true;">
                              <img name="menu1" src="images/home/menu1.gif" width="188" height="23" border="0" alt="Research and Statistics"></a></td>
       </tr>
</table>

</body>
</html>
0
 
mattfairwCommented:
:) a mistake i made many a time before i got the hang of divs...

in the "else" statement in your showText() function, it reads:

else {
       document.getElementByID("info").innerHTML = "this is my text to test the script"};
}

...it should read:

else {
       document.getElementById("info").innerHTML = "this is my text to test the script"};
}

...the only correction being that "getElementByID" should be "getElementById" ...the "d" in "Id" is lowercase.

cheers!
0
 
mattfairwCommented:
on a side note, the .innerHTML method supports html tags...(how about that :) ) so if you wanted you could still swap out images, or even as easy as use the <br> tag for formatting the text you enter.

-Matt

0
 
darkylaAuthor Commented:
You are my official hero.  It works like a charm.  THANKS!!!!
0
 
darkylaAuthor Commented:
Oh... but wait!  Are you still there?  I have eight nav buttons, and each one has a different text associated with it. The onmouseover showText('disp') function is specific to one ID name... how do I change it so I can use more than one ID in the same <td> cell?
0
 
mattfairwCommented:
well, you could do a few things -

1. 8 functions ...stupid idea, but it would work ;)
2. 8 div tags with each one a diff id and each nav button points to a different one
3. pass a second parameter to the function that would show which nav button they're comming from and assign text based on that
4. pass a second parameter to the function that holds the text that would be displayed.

i ould recommend 3 or 4 aand its your call. 4 would be easier if you didn't have long complicated text or HTML tags, but from the site you posted, you may want to go with 3 and assign the text in the function because it just might be easier to deal with because it will all be in one place and you won't have to worry about quotes inside of quotes.

-Matt
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.