none
Mouse Rollover to show "alt text" help!

    Question

  • When I built my site www.daraassociates.com about three years ago, I think I used EW 1.  On the mouse rollover, I was able to get the "alt text" of the image to pop up.  That was when we were still using IE 6 I think.  Now I can't get it to happen.  Is there a way to do it with EW4 that I am using now?   Us old guys take longer to figure things out.

    Andie Z


    Help
    Friday, May 6, 2011 3:17 PM

All replies

  • On a mouse over it is the title that pops up.

     

    <img title="text to show" src="url" />

    • Proposed as answer by Steve Easton Friday, May 6, 2011 4:01 PM
    Friday, May 6, 2011 3:42 PM
  • How do I got a mouseover to do anything with that text?
    Help
    Friday, May 6, 2011 8:51 PM
  • Please restate the question.  What are you asking?  [A mouseover will show the title text (usually).  That's what it does with it, but that's already been answered.]
    Friday, May 6, 2011 8:53 PM
  • I can't get a mouseover to work.  In behaviors, I try mouseover. and it doesn't do anything. I think I need to find out how to write "onmouseover" code and where to put it.  I find "onmouseover" code in the site, but it doesn't work.  It may not be in the correct place.   
    Help
    Friday, May 6, 2011 11:28 PM
  • Why are you trying to use behaviors?  To do what?  You don't need anything of the kind to just see title text when the mouse goes over it.  Just put the image in, add a title attribute, as TB illustrated, and you're done.
    Saturday, May 7, 2011 12:12 AM
  • "Onmouseover" doesn't explain what you are trying TO DO. It just says what you are messing with.

    If you are just trying to get a little tool tip window to open, do as TB and Kathy said, use Title, not Alt-text. (Some browsers used to show the alt-text, improperly/nonstandardly. Just use the Title for that from now on).


    "If I had asked my customers what they wanted, they would have said a faster horse." Henry Ford
    Saturday, May 7, 2011 12:13 AM
  • BUT, when I use "title" instead of "alt" it works, but I get an incompatability error.  On another site "alt" works with no problem.  I think I'm doing something wrong or is EW4 messing with me?

    Andie Z


    Help
    Sunday, May 8, 2011 2:52 PM
  • Use BOTH alt and title.
    The title text will display in all browsers (except Netscape 4) om mouseover. The alt text is required because it is a text alternative for those browsers that cannot (for any reason) display images.

    <img alt="this will show when the image does not display" title="this will display on mouseover">

    Internet Explorer can be configured to display alt text on mouseover as well as when the image cannot be displayed, but this is a user setting - nothing to do with HTML.


    Ron Symonds
    Microsoft MVP (Expression Web)

    www.rxs-enterprises.org/fp
    Sunday, May 8, 2011 3:07 PM
  • <img alt="this will show when the image does not display" title="this will display on mouseover">
    should be
    <img src="pic.jpg" width="300" height="150" alt="this will show when the image does not display" title="this will display on mouseover">

    It helps if an img tag has a src attribute :)


    Ron Symonds
    Microsoft MVP (Expression Web)

    www.rxs-enterprises.org/fp
    Sunday, May 8, 2011 3:09 PM
  • I figured it out, with everyone's help.  _Ronx just confirmed that what I did was correct.  Is this documented anywhere?  Thanks for the help.  I may be back.  Thank you!  Thank you!

    Andie Z


    Help
    Sunday, May 8, 2011 3:15 PM
  • <img alt="this will show when the image does not display" title="this will display on mouseover">

    should be

    Ron, I'm having the same problem Andie is having, and I understand what y'all are trying to tell her. However, when I add 'img' to the alt= tag, EW4 grinches about it. It tells me, "img is not permitted for the img tag. :) How informative is that!?

    <img src="pic.jpg" width="300" height="150" alt="this will show when the image does not display" title="this will display on mouseover">

    No, 'alt' doesn't, not in any one of the five major browsers. I've checked and rechecked the code, and even rearranged it to no avail. Having said that, adding 'title' to the mix works just fine, which to my mind is redundant and shouldn't be required. Try as I might, I cannot wrap my head around the fact that 'alt' does nothing, but XHTML absolutely requires it, according to EW4.

    It helps if an img tag has a src attribute :)

    The code I'm working with is:

    <img src="images/apple.png" style="float: right; padding: 15px" width="350" alt="Apples on tree" />

    which is what the instructions give in the Step by Step HTML & XHTML. The book's a little old, so I checked with W3cSchools, searching for img src= alt= and got the same answer. <http://www.w3schools.com/tags/tag_IMG.asp> When I searched for img "title", I got the exact same answer <img src="angry.gif" alt="Angry face" />

    I understand what it's "supposed" to do, but it doesn't; not at all. So, I will go with the 'alt'ernative (pun intended) and give my images a title as well as 'alt'. This works just fine . . .

    <img src="angry.gif" title="Angry face" alt="Angry face" width="32" height="32" />

    It feels a little wrong when I add 'alt' since in my case, it does nothing. Sigh . . .


    Nancy Ward
    Monday, May 9, 2011 4:31 PM
  • I figured it out, with everyone's help.  _Ronx just confirmed that what I did was correct.  Is this documented anywhere?  Thanks for the help.  I may be back.  Thank you!  Thank you!

    Thank you for bringing this issue up just when I needed it! I was beginning to think I was going out of my mind, which isn't all that hard these days.


    Nancy Ward
    Monday, May 9, 2011 4:33 PM
  • Nancy, that link you give provides an explanation of exactly that:

    Tip: The alt attribute is meant to be used as an alternative text if the image is not available, not as a mouse-over text. To show a mouse-over text on images or image-maps, use the title attribute, like this: <img src="angry.gif" alt="Angry face" title="Angry face" />

    IE6 displayed the alt text as a tooltip, but that isn't the correct way for browsers to handle it. Modern browsers don't do it that way. As mentioned already, if you want it to show on hover, use the title attribute. Alt text is only for when the picture isn't available.

    A perfect use of this, and the reason that alt text is required, is the use of screen readers for visually impaired users. A screen reader cannot do anything with a picture; it can read alt text. Therefore it is an accessibility issue. This is especially critical on sites using images for navigation. Take away the images and there is no navigation unless there is alt text! Title does nothing in this case, because that isn't its job.

    If you have the Web Developer Toolbar in Firefox, you can check this out for yourself. You can mouseover images and see the title text, but try disabling all images and see what happens if you have no alt text.

    Edit: note this will still display the title text if you have provided it, but the image itself is gone, and screen readers cannot use the title text. Additionally, title text isn't very useful for navigation.

    There are two different attributes with two different purposes. If you want the text to show on mouseover, you need to use both. However, even if you don't use title, you still need to use alt for accessibility.

    Jim


    • Edited by fcphdJim Monday, May 9, 2011 5:28 PM clarification
    Monday, May 9, 2011 5:10 PM
  • Thanks so much for the explanation, Jim. It all makes sense now. One more lesson learned. :)

    Tip: The alt attribute is meant to be used as an alternative text if the image is not available, not as a mouse-over text. To show a mouse-over text on images or image-maps, use the title attribute, like this: <img src="angry.gif" alt="Angry face" title="Angry face" />

    Whoops, I didn't read far enough down; especially when I searched for img title and got 'alt' instead!

    A perfect use of this, and the reason that alt text is required, is the use of screen readers for visually impaired users. A screen reader cannot do anything with a picture; it/can/ read alt text. Therefore it is an accessibility issue. This is especially critical on sites using images for navigation. Take away the images and there is/no/ navigation unless there is alt text! Title does nothing in this case, because that isn't its job.

    Thanks for this explanation. That's exactly what I needed to get my head wrapped around it!

    If you have the Web Developer Toolbar in Firefox, you can check this out for yourself. You can mouseover images and see the title text, but try disabling all images and see what happens if you have no alt text.

    I could get the title to show, but never could get alt text to show. Now I know exactly why.

    I wish I had a newer HTML/XHTML book, but so far I haven't found one any newer. If anyone knows of one published after 2006 (preferably closer to 2011), please let me know where to find it.


    Nancy Ward
    Monday, May 9, 2011 5:37 PM
  • "If anyone knows of one published after 2006 (preferably closer to 2011), please let me know where to find it."

    Seriously? Amazon.com? Barnes & Noble? Google Books? Borders? etc. etc.

    You can search for Recent Releases, New Releases, Publication Date on any of those sites.


    "If I had asked my customers what they wanted, they would have said a faster horse." Henry Ford
    Monday, May 9, 2011 6:25 PM
  • Nancy,

    Alt is for accessibility, assistive devices & for when the image fails to load for whatever reason.  The alt attribute content should convey the same meaning as the image. Title additional informatiion that adds to the information. The two items should never have the same text.

    They server different purposes. Alt is mandatory while title is optional. Many browsers have never displayed the alt attribute on mouse or keyboard focus. IE is the only major browser that did so. MS has changed to fall in line with the other browser's behavior.

    As I've said many times before the alt element is mandatory for accessibility BUT if the image is purely decorative then you can leave it empty but in that case you would also not need a title since there would be no meaningful information conveyed by the image. In your example there would be no reason to put a title on the image.

    <img src="angry.gif" title="shareholders at the 2010 board meeting" alt="angry shareholders" width="32" height="32" />


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com
    Monday, May 9, 2011 7:52 PM
  • Nancy,

    HTML and XHTML have not changed since 2006 so you don't need a "newer" book. Newer books would be about HTML5 which is still in working draft stage.


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com
    Monday, May 9, 2011 7:54 PM
  • >Seriously? Amazon.com? Barnes & Noble? Google Books? Borders? etc. etc.

    Bill, I've searched all of 'em, plus O'Reilly and so far have been disappointed. Every so often, I go on a new hunt, but haven't had success yet. :(


    Nancy Ward
    Monday, May 9, 2011 11:29 PM
  • HTML and XHTML have not changed since 2006 so you don't need a "newer" book. Newer books would be about HTML5 which is still in working draft stage.

    Yeah, y'all have told me that a few times. And I would have no clue that I'm doing things wrong if it weren't for EW4 grinching every time I follow a wrong example.  I'm finding more and more inconsistencies with the code examples.

    I tried studying/writing the code in Notepad and Notepad Plus, but both were too cumbersome. I hit on opening the code samples in EW4, which is great. EW tells me what's wrong and most of the time gives me a good hint at how to correct it.
    I'm getting pretty good at recognizing the boo-boos in the code, and am making progress in that area at least. EW4 is really great

    I've learned a whole lot, but even so, when I open a code sample with a 'DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01' and there are a gazillion squigglies, it's a tad upsetting. So, I change things to DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0' makes things better, but the code's still full of squigglies, although in different places.

    Probably I should have asked for the name of an author, rather than a newer book. :) I'm going out searching for HTML and XHTML plus CSS by a different author.

    Thanks everyone . . . The first time through the complete book gets my feet on the ground and gives me a path to follow. Once I find a suitable second book, I should be grounded enough to start on actually working in EW (using a book, of course).


    Nancy Ward
    Tuesday, May 10, 2011 12:00 AM
  • Nancy,

    I have yet to find a book that explains HTML well enough to grasp the concept from the start.  Three years ago I struggled to find the basis of it and came to the conclusion that there was no logic to it.  I'm probably wrong, but does it need logic or just "do it"?  Consider MSDOS.  I started out with TRSDOS which made more sense but ended up memorizing MSDOS buy repetition.  I guess I'll have to do that with HTML except the rules keep changing.  This Forum has been a help and inspiration.  At 71 years, I shouldn't be doing this.  Although my mother still wins international wine making medals at 92.

    Andie Z


    Help
    Tuesday, May 10, 2011 12:32 AM
  • Nancy, FWIW I never did get a book about HTML. I just mucked around in EW, paying attention to the errors, and found helpful resources online. Now I'm to the point that when EW throws an error warning at me I usually (not always) realize right away where the problem is. Practice is the best teacher.

    W3schools has a wealth of information, including a complete HTML reference. I am also very partial to Sitepoint. Try their HTML reference for a bunch of good information. Their forums are excellent too.

    Finally, the regulars here don't mind answering HTML/CSS questions either, especially if you provide a link to the troublesome page. Cheryl's forum (everyone should check it out!) is an even better place to ask those type of questions, and you know that she'll answer questions there.

    Good luck with the learning curve.

    Jim

    Tuesday, May 10, 2011 12:40 AM
  • I have yet to find a book that explains HTML well enough to grasp the concept from the start.  Three years ago I struggled to find the basis of it and came to the conclusion that there was no logic to it.  Thing is that in order to be able to work well in EW, we need to understand HTML.

    I agree somewhat; however, I seem to be picking things up pretty well, even with a book written by this particular author. Like you, I've tried and failed before and hung it up for a few years.

    I'm probably wrong, but does it need logic or just "do it"?

    The more I work with HTML, the more I understand. For awhile, I didn't understand the <a /> tag, but now, I know it's connected to hyperlinks. And if I have that wrong, well, I'll find out.

    Consider MSDOS.  I started out with TRSDOS which made more sense but ended up memorizing MSDOS buy repetition.

    Ahhh, the Tandy TRS 80? Affectionately known as the Trash 80? :) I started out with OS9 (prior to 1981) for the Tandy Color Computer. We be dated, we do. And yes, when I bought my first PC, I had to learn MSDOS too.

    I guess I'll have to do that with HTML except the rules keep changing.

    Actually, the rules don't change; we just have to learn all the ins and outs of code, which isn't easy, but it can be done.

    This Forum has been a help and inspiration.  At 71 years, I shouldn't be doing this.

    Ha! Gotcha beat by a couple years and I should be doing this. Keeps Alzheimer's at bay, it do! The more we exercise our minds, the better chance we have of living the rest of our lives with our minds intact!

    And yes, this Forum has helped me more than anything else. When I get stuck, I come here and read . . . well, I actually read it every couple days.

    Although my mother still wins international wine making medals at 92.

    Wonderful!


    Nancy Ward
    Tuesday, May 10, 2011 1:27 AM
  • Nancy, FWIW I never did get a book about HTML. I just mucked around in EW, paying attention to the errors, and found helpful resources online. Now I'm to the point that when EW throws an error warning at me I usually (not always) realize right away where the problem is. Practice is the best teacher.

    Some of us can just jump in and do things, while others of us (me) must have a book (crutch) to work from.

    W3schools has a wealth of information, including a complete HTML reference. I am also very partial to Sitepoint.Try their HTML reference <http://reference.sitepoint.com/html> for a bunch of good information. Their forums are excellent too.

    Hey, thanks for this link! I hadn't been there before. I may even take some of their courses; they're cheap enough.

    Finally, the regulars here don't mind answering HTML/CSS questions either, especially if you provide a link to the troublesome page.Cheryl's forum <http://expressionwebforum.com/> (everyone should check it out!) is an even better place to ask those type of questions, and you know that she'll answer questions there.

    I know, but I don't have a site set up yet, since I'm still trying to get my feet on the ground with HTML before I jump into EW and actual site building. Y'all have been really great to get me on the right track when I take a wrong turn. :)


    Nancy Ward
    Tuesday, May 10, 2011 1:35 AM