Rollover text to image on restaurant menu. Newbie

amy3000 · Oct 23, 2002

Hi,
I have been digging into HTML for about 3 weeks now. My friend who has done a few web pages said I must use HTML first and stay away from all that nice software, like dreamweaver, for a while. So here I am. I've struggled along and have made quite a bit of progress.

I'm doing a web page for a restaurant. I want to be able to rollover the text in order to see a picture of the menu item along with a list of ingrediants.

I'm quite frankly not even sure if I'm using the correct terminology. I have a couple of books but only see how to go from an image to another image. My brain can't make the leap to doing this with text.

Thanks

starway · Oct 24, 2002

If I understand you correctly, you want someting like this:
> food1 ---------
> food2 | image |
> food3 ---------
When you point mouse cursor over an item, the image should change accordingly.

Here's how to do this:
<html>
<head>
<script>
if (document.images) {
im1 = new Image();
im1.src = "food1.gif"
im2 = new Image();
im2.src = "food2.gif"
im3 = new Image();
im4.src = "food3.gif"
}

function showPic(pic, source) {
if (document.images)
document.images[pic].src = source;
}
</script>
</head>
<body>
<a href="#" onmouseover="showPic('picture', 'food1.gif')" onmouseout="showPic('picture','blank.gif')">food1</a><br>

<a href="#" onmouseover="showPic('picture', 'food2.gif')" onmouseout="showPic('picture','blank.gif')">food2</a><br>

<a href="#" onmouseover="showPic('picture', 'food3.gif')" onmouseout="showPic('picture','blank.gif')">food3</a><br>

<img src="blank.gif" name="picture" width="100" height="100" alt="good">
</body>
</html>

Targol · Oct 24, 2002

To hide and show text, place it into a <DIV> that you'll show using it's style attribute "display" to "block" (to show) or to "none" to hide. Here's an exemple :

html page

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>
<html>
<head>
<title></title>
<script type=&quot;text/vbscript&quot; language=&quot;vbscript&quot;>

function InitPage()
   call afficheMenu(0)
end function

function afficheMenu(numMenu)
dim curMenu
curMenu = document.getElementById(&quot;CurMenu&quot;).value
if curMenu<>numMenu then
   document.getElementById(&quot;CurMenu&quot;).value = numMenu
   if numMenu = 0 then
      document.getElementById(&quot;Firstdiv&quot;).style.display = &quot;block&quot;
      document.getElementById(&quot;Seconddiv&quot;).style.display = &quot;none&quot;
   else
      document.getElementById(&quot;Firstdiv&quot;).style.display = &quot;none&quot;
      document.getElementById(&quot;Seconddiv&quot;).style.display = &quot;block&quot;
   end if
end if
end function
</script>
</head>
<body bottommargin=&quot;0px&quot; onload=&quot;call initPage()&quot;>
<input id=&quot;CurMenu&quot; type=&quot;hidden&quot; value=&quot;0&quot; />
<div id=&quot;Firstdiv&quot; onclick=&quot;call afficheMenu(1)&quot;>first DIV</div>
<div id=&quot;Seconddiv&quot; onclick=&quot;call afficheMenu(0)&quot;>Second div</div>
</body>
</html>

This exemple show only one div at a time. Clicking on the shown div hides it and show the other one. Water is not bad as long as it stays out human body ;-)

tnsbuff · Oct 24, 2002

Targot, is that cross-browser compatible back to the version 4 browsers (Netscape included)?

Currently, I always shoot for backwards compatibility to version 4, although some people don't feel the need to be backwards compatible if they're in a controlled environment where everyone uses a recent version of IE.

Thanks,

Targol · Oct 24, 2002

Well, I'm not sure but I think that V4.x browsers accept css and Html 4.0 so that should work. The thing I wonder is if V4.x browsers know the "getElementById" function. If no, you can use browser detection scripts you can find easily on the web.

By the way, I don't know if there are many people noadays that still use V4 browsers as the earlier versions are free to download and many sites wont allow the use of them. Water is not bad as long as it stays out human body ;-)

tnsbuff · Oct 24, 2002

>> By the way, I don't know if there are many people noadays that still use V4 browsers as the earlier versions are free to download and many sites wont allow the use of them. <<

If you're selling something, you don't want to turn anyone away. Generally, the only people that upgrade their browsers regularly are techies like ourselves that spend lots of time on the web, (unless someone sends them a disk to do an upgrade or they buy a new computer).

My stats for several sites show around 3-4% for Netscape 4, which is still quite a signigicant number. (Actually it's more like 5-6%, but I fugure some of that is from me testing in Netscape 4.) although none of this is an issue if the feature and information it displays is not absolutely necessary.

The other thing is that your code is written in vbscript which only works on IE. A fair amount of people use Netscape, and many more will use be using it soon, with AOL switching to the Netscape browser in its new versions. I would suggest using JavaScript instead if the site will be displayed on the www.

Having said all that, I do appreciate your script and I'm going to play with it and try to convert it to JavaScript for future use.

Thanks,

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Rollover text to image on restaurant menu. Newbie

amy3000

Technical User

starway

Programmer

Targol

Technical User

tnsbuff

Technical User

Targol

Technical User

tnsbuff

Technical User

Similar threads

Part and Inventory Search

Sponsor