www.webdeveloper.com
Results 1 to 3 of 3

Thread: Mouse over image

Hybrid View

  1. #1

    Exclamation Mouse over image

    Hey people!

    So I have a portfolio of images which are 800 pixles wide, so there is not alot of room for content or descriptions. For this reason I would like some ideas or suggestions of how to do a mouse over of an image.

    What I want is some script or something that will mean when someone mouses over the image, it grays out or something and would provide some text content over the image.

    There might be a tutorial for this kind of thing online, or perhaps a script i can download.

    I dont no if anyone can do this but any ideas/suggestions would be greatly appreciated!

    Thanks,

    Mike
    Mike Oram
    Elite Web-Creation
    Design Innovation Guaranteed
    www.eliteweb-creation.co.uk

  2. #2
    Join Date
    Feb 2011
    Posts
    231
    You can put that image as a background of a DIV (with CSS background), and the text content inside that DIV.
    Or you can use JS onmouseover event in <img> to make visible a html tag.
    <img src="image.jpg" onmouseover="document.getElementById('id_tag_text').style.display='block';" />

  3. #3
    Quote Originally Posted by MarPlo View Post
    You can put that image as a background of a DIV (with CSS background), and the text content inside that DIV.
    Or you can use JS onmouseover event in <img> to make visible a html tag.
    <img src="image.jpg" onmouseover="document.getElementById('id_tag_text').style.display='block';" />
    Could you elaborate on this suggestion a bit please? I dot want to use the image as a background image as Im trying to make the site as accessible as possible so would like to include alt tags.

    I am interested in the second idea but dont really understand. could you expand on this please?

    Thanks
    Mike Oram
    Elite Web-Creation
    Design Innovation Guaranteed
    www.eliteweb-creation.co.uk

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles