Forum Moderators: open

Message Too Old, No Replies

Image rollover AND a text rollover on the same anchor?

         

HaloStorm

6:57 pm on Dec 20, 2001 (gmt 0)



Hi there, i am building a site which has image rollovers on the buttons in order to hilite them. The client wants it to also tell you what section you would enter if the button were clicked... so on the "new" button, illustrated by a new tag that is highlighted onMouseover, they want it to also say "What's New" beside the button onMouseover.

Does anybody know how i can do this?
Thanks in advance :)

URL deleted

(edited by: tedster at 8:27 pm (gmt) on Dec. 20, 2001)

hasbeen

7:08 pm on Dec 20, 2001 (gmt 0)

10+ Year Member



Couldn't you just stick the page title or path in the Alt tag of the image? For example:

<a href="/children/showcase.htm" onMouseOut="swapImgRestore()" onMouseOver="swapImage('showcase','','/Images/Home/btnShowcaseO.gif',1)"><img name="showcase" border="0" src="/Images/Home/btnShowcase.gif" width="105" height="19" alt="Customer Showcase"></a>

This will do a roll over and show the alt tag as "Customer Showcase"...

Hope it helps.

hasbeen

7:10 pm on Dec 20, 2001 (gmt 0)

10+ Year Member



Nice looking site, by the way.

Marshall

7:13 pm on Dec 20, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



In adition to using the alt tag, also use the title tag. Some browsers won't display the text using only alt. So add title="whatever you want to say"

tedster

8:02 pm on Dec 20, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Just to be clear about this, use a title attribute in the anchor tag and an alt attribute in the image tag.

IanKelley

11:53 pm on Dec 21, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



There are lots of ways you could do it... You do realize that you can call multiple javascript functions from an event by separating them with ;'s right?

The only downside with using title and alt tags is that there is a delay before the tooltip shows up so not all visitors will see them...

Your url was removed so I don't know if this would work with your layout but one way to do it would be to put a column of hidden elements beside the images and then make them visible onmouseover.

If there isn't room for that kind of white space in your layout then you can use DHTML to create tooltips (which would come up instantly and would give you full control over the appearance.)

The last thing that comes to mind is a little high bandwidth... Have your mouseovers activate not only the menu item but also an new image in a static location. I'm sure you've seen it done before on other sites... It was very popular a year or so ago. You could also do the same thing with text instead of images.