VSD's Alternative Text for MouseOvers...

User 117361 Photo


Ambassador
6,076 posts

Tom,
I think the point that seems to have been missed here is that the alt attribute...... or alternative text as we are calling it........ is not the only tooltip mouseover effect.

So the alt text DOES show up in IE, but you would normally, in html coding, be able to add in the TITLE attribute mouseover also. At the present time this is not available in the VSD software.

The main thing is, however, that the alt text is still available for those using screen readers even though it may not be visible to an "able" user. So, providing you have added an alt text, even with Firefox, this is still visible. If you are using the Firefox web developer add-on..... and I highly recommend it......... you can turn off the images and replace them with the alt text just to prove my point here.

So don't worry too much about the mouseover......... the screen readers pick up the text anyway.
User 463058 Photo


Ambassador
1,085 posts
Online Now

Tom Levan wrote:
I have created a test page and uploaded it to the following URL:

http://www.abcdtest.150m.com/index.html

The page doesn't do anything but illustrate the mouseover effects that work in IE7, but not in the other browsers. Let me know what you think.


So things are what it sounded like. There's nothing wrong with other browsers. You are just relying on a bug in older IE browsers.

That's the alt attribute which IE 6 and 7 handle incorrectly. IE 8 fixes this behavior so it acts like other modern browsers. The alt attribute should be the text on the buttons in case their images aren't visible for whatever reason. So the alt attributes should simply be Top, Print, Save and Email.

The longer explanatory text won't fit within the image areas and won't be of help to most users anyway since it's not using the title attribute.
User 488057 Photo


Registered User
130 posts

So what are you two telling me, that my three alternate text strings ("Print a copy of this article," etc.) are NOT supposed to be displayed and offset by 20 pixels when the mouse hovers over each button? (There is no alternate text for the Top button.) If this is the case, then what's the point of the alternate text? I'm not using this feature for screen readers. I'm using it to further clarify what these three buttons are for!
User 597929 Photo


Registered User
1,332 posts

Tom Levan wrote:
... what's the point of the alternate text?


From the W3 School,

http://www.w3schools.com/htmL/html_images.asp

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.


It wasn't meant for the purpose you describe. It's unfortunate that VSD doesn't support the "Title" attribute.
"You can't be a real country unless you have a beer and an airline - it helps if you have some kind of a football team, or some nuclear weapons, but at the very least you need a beer." -- Frank Zappa

Visit Spinland Studios: http://www.spinland.biz
User 488057 Photo


Registered User
130 posts

Spinny,

If the alternate text "attribute" wasn't meant for the purpose I described, then why do so many web sites with articles on them do exactly what I did with my site? In fact, that's where I got the idea from in the first place! For example, hover your mouse (in IE6 or IE7) over the words Email, Save, and Print at the top right of the article at the following URL:

http://www.usatoday.com/money/markets/2 … sday_N.htm

If I'm not using this feature the way (or one of the ways) it was intended to be used, then all I can say is that I feel like a total idiot.
User 488057 Photo


Registered User
130 posts

Spinny,

Here's a quick followup to my last post. I just checked out that website in Firefox, and the same thing happens when I hover my mouse over those words that happens in IE7. This doesn't happen with the buttons in my site! So, what are they doing that I'm not doing in VSD?
User 597929 Photo


Registered User
1,332 posts

People have simply been taking advantage of browser screw-ups, as Cary said. The browsers that still screw up in that fashion are dwindling. The same can be said for how tables are used to place things on web pages: everyone does it, it's not how they were meant to be used, and the ability is going away in future versions of HTML.
"You can't be a real country unless you have a beer and an airline - it helps if you have some kind of a football team, or some nuclear weapons, but at the very least you need a beer." -- Frank Zappa

Visit Spinland Studios: http://www.spinland.biz
User 597929 Photo


Registered User
1,332 posts

Follow-up to your follow-up: they're using the Title attribute. Look at their source code. VDS doesn't allow you to specify that, but you can go in with a text editor after you save the pages and add Title if you wish. Just don't upload via VSD again after you do it.
"You can't be a real country unless you have a beer and an airline - it helps if you have some kind of a football team, or some nuclear weapons, but at the very least you need a beer." -- Frank Zappa

Visit Spinland Studios: http://www.spinland.biz
User 597929 Photo


Registered User
1,332 posts

Here's the part of their code that's creating those links:

<a href="#" ONCLICK="return(ET());" onMouseOver="return(ETMouseOver());" onMouseOut="return(ETMouseOut());" title="EMAIL THIS">E-mail</a> | <a href="#" ONCLICK="return(ST());" onMouseOver="return(STMouseOver());" onMouseOut="return(STMouseOut());" title="SAVE THIS">Save</a> | <a href="#" ONCLICK="return(PT());" onMouseOver="return(PTMouseOver());" onMouseOut="return(PTMouseOut());" title="PRINT THIS">Print</a>


Note the use of Title in each case.
"You can't be a real country unless you have a beer and an airline - it helps if you have some kind of a football team, or some nuclear weapons, but at the very least you need a beer." -- Frank Zappa

Visit Spinland Studios: http://www.spinland.biz
User 463058 Photo


Ambassador
1,085 posts
Online Now

Tom Levan wrote:
If the alternate text "attribute" wasn't meant for the purpose I described, then why do so many web sites with articles on them do exactly what I did with my site? In fact, that's where I got the idea from in the first place! For example, hover your mouse (in IE6 or IE7) over the words Email, Save, and Print at the top right of the article at the following URL:

http://www.usatoday.com/money/markets/2 … sday_N.htm

If I'm not using this feature the way (or one of the ways) it was intended to be used, then all I can say is that I feel like a total idiot.


You definitely shouldn't feel like an idiot. I don't know how well this will work, but VSD allows you to insert html code into the page, in either the head or the body. You can try inserting the code below into the body of your page and see if it works any better.

Maybe you should first move the buttons you already have to another location on the page temporarily in case this doesn't work, so you don't have to recreate them. It depends on the button image files you already have in your files folder.

Assuming this works, I don't know if deleting the old buttons from the page will delete the button images as well from the files folder. Hopefully, Spinny or someone else can say.

<div style="position:absolute; top:263px; left:381px; z-index:2;"><a href="index.html" onMouseOver='img_mo1.src="files/mo_IMG_4.jpg"' onMouseOut='img_mo1.src="files/IMG_3.jpg"'><img src="files/IMG_3.jpg" name="img_mo1" width=32 height=20 border=0 alt="Save" title="Save a PDF file of this article."></a></div>

<div style="position:absolute; top:263px; left:417px; z-index:3;"><a href="mailto:" onMouseOver='img_mo2.src="files/mo_IMG_6.jpg"' onMouseOut='img_mo2.src="files/IMG_5.jpg"'><img src="files/IMG_5.jpg" name="img_mo2" width=38 height=20 border=0 alt="Email" title="Email a friend about this article."></a></div>

<div style="position:absolute; top:263px; left:342px; z-index:4;"><a target="_blank" href="index.html" onMouseOver='img_mo3.src="files/mo_IMG_8.jpg"' onMouseOut='img_mo3.src="files/IMG_7.jpg"'><img src="files/IMG_7.jpg" name="img_mo3" width=36 height=20 border=0 alt="Print" title="Print a copy of this article."></a></div>

<div style="position:absolute; top:263px; left:308px; z-index:5;"><a href="index.html" onMouseOver='img_mo4.src="files/mo_IMG_10.jpg"' onMouseOut='img_mo4.src="files/IMG_9.jpg"'><img src="files/IMG_9.jpg" name="img_mo4" width=32 height=20 border=0 alt="Top"></a></div>

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.