Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image replacement with hover

    I'm trying to figure out how to make a link, when hovered a picture changes to a corrisponding picture. I'm taking this site http://www.diane-etzwiler.com/galleries.html and changing it to a div layout in css. I have the whole thing done except for that page. Here is the redone page (http://www.designhousestudios.info/galleries.php) but I want the links to change images on the left when hovered. Kinda like the top URL but instead of each corner of the image changing, just have a full image change on hover.
    Any help on how to do this with css and maybe some js would be helpful!

    Thanks everyone,

    Ryan

  • #2
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's approx. 38,000 sites with instructions on how to do CSS rollovers.
    http://www.google.com/search?q=css+r...utf-8&oe=utf-8
    Enjoy!

    I take no responsibility for the above nonsense.


    Left Justified

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Did you even read my post or look at the links!! If you look at the site I'm working on you can tell that I know css very very well.

    I wasnt asking for a css rollover. I want image placement to change on hover of a link. It's all there above if you can read....

  • #4
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer

    Quote Originally Posted by 123dhs321
    I'm trying to figure out how to make a link, when hovered a picture changes to a corrisponding picture.
    And then....
    I wasnt asking for a css rollover
    Could have fooled me. (You did, in fact.)

    You're orignal post does a poor job of explaining what you are trying to achieve. Am I correct in saying that you want the four images to the left of the menu to change in relation to which menu item is currently being hovered over? If so, you will need to use js entirely so you should ask to have this post moved over there.

    If you look at the site I'm working on you can tell that I know css very very well.
    So your top menu is completely borked in Mozilla/Firefox etc on purpose?

    I take no responsibility for the above nonsense.


    Left Justified

  • #5
    Regular Coder
    Join Date
    Aug 2004
    Location
    The Netherlands
    Posts
    211
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by 123dhs321
    If you look at the site I'm working on you can tell that I know css very very well.
    right...
    http://jigsaw.w3.org/css-validator/v...galleries.html

    Learn XHTML and stop abusing tables!

  • #6
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    We just went over this yesterday in this thread:
    http://www.codingforums.com/showthread.php?t=46313

    What you do is create an image that has the rollover effect AND the regular effect, one on top or bottom (or left to right) -- you then do an image replacement that allows the background to shift to the rollover. It's a common practice now, and no javascript is required. The image would look like so:
    http://www.igotyourhouse.com/images/links.png

    And then you'd apply your background to that specific ID with the position at 0px 0px. Next step would be a negative value for the top/bottom or left/right (depending on the way you create your image). Make sure you give your id a specific width/height, and give it a display block. It'll work just fine. If you use two separate images, they will not preload as with the javascript method.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #7
    New Coder
    Join Date
    Oct 2004
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry

    Jero: right...
    http://jigsaw.w3.org/css-validator/.../galleries.html

    Learn XHTML and stop abusing tables!
    You don't read either!!! I said before I'm REDESIGNING this site from tables to a css layout. Do not patronize me! All pages on the redesign do validate beautifully!!

    I’m starting to think this forum is full of unskilled idiots who don't know how to read.

    I already figured out the problem. Their is no need to post any more ridicules accusations on this thread.

    Thanks but no thanks for you help.

    P.S. I wanted a css solution not pure js. I know their is one out there. So this post does belong in the html/css section.

    P.S.S. The site has moved from a PHP server to a ASP server to fit the clients needs. The REDESIGN is located here: http://designhouse.sagetemplates.com/index.asp (that’s why the menu doesn’t work on the link above. I'm using If then statements to create stickies on each page with only one image for the entire navigation. The statements are in ASP and my PHP server does not recognize them of course, thus the menu looks wierd. So take a look at the ASP server where the current development is held.)

    The ORIGIONAL is here: http://www.diane-etzwiler.com/index.html

    No go ahead a validate all you want on the clients original site. I didn't design it some shmo did. Hence, the reason for a REDESIGN!!!

  • #8
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know some people jumped on you, and I'm sorry for that -- but did my last post not help you offer a solution as to how to do a CSS only rollover, as you asked for? Your first post seemed like that is what you wanted, after that you wanted different elements to change position when rolled over on a different link, which is also possible.

    And, he's right Jero, if you look at his other posts in this forum, he's been redesigning the site over to tableless for quite some time now -- all of it semantic, and clean.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #9
    New Coder
    Join Date
    Oct 2004
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, how do you take a link on hove and change an image, let's say next to it, when the hover occures? Than when you move down to the next link and hover over it, that same image, lets say its next to a list of links, changes to it's corrisponding image. How can I acheive this with very little if at alll any javascript and css.

    Thanks,
    Ryan


  •  

    Posting Permissions

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