Solved

Remote Rollover Using Both Text and Images

Posted on 2004-08-06
12
446 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
 

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Windows Standards for file storage. 3 18
I starting with php 12 94
Lines Not Lining Up 2 51
Re-position sub-options beneath the TAB 7 42
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

762 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now