SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: mouseover?

  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mouseover?

    How do I code a page to invert an image if the user moves the mouse over it?

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    A real cheap and nasty way is to add a onMouseOver attribute to the image.
    <img src="img1.jpg" onMouseOver="this.src='img2'" onMouseOut="this.src='img1'" alt="">

    hmmm.. a really cheap and nasty way.

  3. #3
    SitePoint Member
    Join Date
    May 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    invert

    Can I add the invert filter with this code?

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Are you talking about Internet Explorer's proprietary style filter ?

    That would make it even cheaper and nastier!

  5. #5
    SitePoint Member
    Join Date
    May 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need the invert filter to be applied when the mouse over occurs

    <img src = "pic.jpg" style = "filter: invert" alt = "pic"/>

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Code:
    <img src="img1.jpg" onMouseOver="this.src='img2'; this.style.filter='invert'" onMouseOut="this.src='img1'; this.style.filter=''" alt="">

  7. #7
    SitePoint Member
    Join Date
    May 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks that got it working,

    Thanks that got it working, would you know how to code a script to blurs an image then slowly unblurs it when it finishes loadingusing the onload event?

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You may want to Google javascript libraries like scriptaculous.


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
  •