Results 1 to 10 of 10

Thread: mouse over html text to swap image

  1. #1
    Join Date
    Nov 2005
    Posts
    132
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default mouse over html text to swap image

    Hi

    I am trying to work out the code than will enable an image to change when the users cursor rolls over some html text.

    eg. text links on the left of a page and a corresponding picture on the right hand side changing on mouse over so as to a give a preview of the image without actually depressing the mouse and getting into the next layer of the site.

    any ideas?
    cheers

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Link or text?
    If text, replace "a" with "span" and remove the href attribute.
    Code:
    <img id="bigImage" src="blank.png" />
    <!-- ... -->
    <a href="one.html" onmouseover="document.getElementById("bigImage").src = 'one.png';" onmouseout="document.getElementById("bigImage").src = 'blank.png';">Link text</a>
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Nov 2005
    Posts
    132
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    many thanks.

  4. #4
    Join Date
    Feb 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Try going here

    http://www.javascriptkit.com/script/...ifferent.shtml

    I have also been able to modify this so that instead of putting it over text, I changed the text line to a thumbnail. And when you put your mouse over the thumbnail or text you can get a bigger picture WITH a description

  5. #5
    Join Date
    Sep 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Mouse over picture - text should appear

    Hello, i need help!

    When the mouse goes over a picture there should appear a text in another table segment.

    This is my page: http://www.wirtschaftswunder.de.vu

    By going over any of the eyes there should appear text over the big eye.

    Thanks!

    P.S.: Do I need Java, Javascript or can I find a solution with html

  6. #6
    Join Date
    Aug 2006
    Posts
    239
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    under mozilla you can just use css
    any element can have pseudoclass "element:hover", so you could use color: transparent in normal, any color at hover.

    In IE7 and Opera this is partialy implemented, in IE6 doesn't work at all, basically you could use
    Code:
    onmouseover="javascript:this.className: myclass2"
    onmouseout="javascript:this.className: myclass1"
    as a workaround (you can replace "this" with element ID, if the hover should induce change in other)

  7. #7
    Join Date
    Sep 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    @ ItsMeOnly: thanks for this fast reply

  8. #8
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Whoah, whoah, whoa! ItsMeOnly! What is that!? That would be completely invalid
    I think you're trying to use css or something.

    Code:
    onmouseover="javascript:this.className: myclass2"
    - Mike

  9. #9
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Heheh. He means, of course:
    Code:
    onmouseover="this.className = 'myclass2';"
    onmouseout="this.className = 'myclass1';"
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  10. #10
    Join Date
    Aug 2006
    Posts
    239
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Mea culpa, wrote this at midnight (CET) when I usually don't care about anything, but just wait until I'm tired enough to go to sleep

    ...like *yawn* now.... goodnight
    Last edited by ItsMeOnly; 09-12-2006 at 10:39 PM.

Bookmarks

Posting Permissions

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