Forum Moderators: open

Message Too Old, No Replies

Text Rollover on Images

         

Clarkie

10:01 pm on May 13, 2011 (gmt 0)

10+ Year Member



Hey,

On my new site, MyBB Tailor, I've used images in the header and people are saying that I need a proper rollover effect on them because of the lack of text.

Apparently using a title tag isn't enough. Here's a link for you to see what it's currently like.

[mybbtailor.com ]

You'll see in the top left a home, search, memberlist, calendar & help button and register and login buttons opposite. It's there that the rollover text will be.

Has anyone got a very simply javascript rollover code where the user scrolls over the image and it says "home" or whatever the image is supposed to be?

Cheers,
Clarkie

tangor

11:04 pm on May 13, 2011 (gmt 0)

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



Title tag works now... adding a javascript rollover is possible, but will not work in javascript disabled browsers, just a heads up. A Bing search for "javascript mouse rollover" will provide dozens of examples.

Clarkie

8:57 am on May 14, 2011 (gmt 0)

10+ Year Member



I google searched and it came up with image rollovers not text ones. Would it be the same?

Clarkie

9:11 am on May 14, 2011 (gmt 0)

10+ Year Member



[dynamicdrive.com...]

Tried that - won't display. :/

rocknbil

4:49 pm on May 16, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<oops> Missed the part about top left. Apply the below to your icons. I'm "pretty sure" this is what people meant when they told you this anyway.

---------------

You mean the big header image at the top? Javascript is not needed. Create two image states in one image, like

this is the normal state part
-----------------------------
this is the mouse rollover part

Structure your html like this.

<div id="logo">
<p id="the-logo"><a href="/forums" title= "enter Forums">Enter Forums</a></p>
<div class="float_right"> (etc.) </div>
</div>

Your image display area is 750 X 140, so this image will be 750 X 280. The containing anchor will only be 140 px high, so only the upper half will display on mousout. Structure it so the mouseover the background moves to the rollover state.

/* outline none for the negative text-indent below */
#the-logo, #the-logo a { width: 750px; height:140px; display: block; margin:0; padding:0; outline:none; }

#the-logo { float: left; } /* may not be needed */

#the-logo a { background: url(/pathto/yourimage.jpg) top left no-repeat; text-indent:-50000px; }

#the-logo a:hover { background-position: bottom left; }

Or, if I've misunderstood, there are some good simple tooltip scripts out there, seems like a lot of work for something you can do in CSS.

tangor

5:31 pm on May 16, 2011 (gmt 0)

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



Among one of several research done on javascript disabled visitors:
[developer.yahoo.com...]
Report was done a year ago... quite possible that "1-2%" might be a bit higher this year.

As indicated in my first reply, the title="Home" etc. tool tip DOES WORK NOW, just not as instantly as js might. Other considerations, such as accessiblity, might also come into play, suggesting actual text links might be equally useful in addition to the icons. Just things to think about when designing a user experience.