Solved

Remote Rollover Using Both Text and Images

Posted on 2004-08-06
12
450 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa‚Ķ
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

734 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