Solved

Remote Rollover Using Both Text and Images

Posted on 2004-08-06
12
449 Views
Last Modified: 2010-04-06
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!
0
Comment
Question by:darkyla
  • 7
  • 5
12 Comments
 
LVL 3

Expert Comment

by:mattfairw
ID: 11737797
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
 
LVL 3

Expert Comment

by:mattfairw
ID: 11737845
scratch that...i don't believe that is what you mean
0
 

Author Comment

by:darkyla
ID: 11737989
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

Author Comment

by:darkyla
ID: 11738013
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
 
LVL 3

Accepted Solution

by:
mattfairw earned 250 total points
ID: 11738155
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
 
LVL 3

Expert Comment

by:mattfairw
ID: 11738156
goin to lunch, if you have questions, i will be back in a lil over an hour
0
 

Author Comment

by:darkyla
ID: 11739842
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
 
LVL 3

Expert Comment

by:mattfairw
ID: 11739961
:) 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
 
LVL 3

Expert Comment

by:mattfairw
ID: 11739978
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
 

Author Comment

by:darkyla
ID: 11740031
You are my official hero.  It works like a charm.  THANKS!!!!
0
 

Author Comment

by:darkyla
ID: 11740100
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
 
LVL 3

Expert Comment

by:mattfairw
ID: 11740547
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

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question