#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    17
    Rep Power
    0

    CSS: using hover to change another image (that is not being hovered over)


    I'm still relatively new to this whole homepage thing. I was wondering if its possible using only CSS to make this happen:

    i have a bunch of headings along the top of a page that a person can click on.

    Below is a box with an image. I would like a different image to appear in that box when a differnt heading above is hovered over. Is this javascript stuff ?:S (havnt started learning that yet)

    tanks, matt.
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Use a little CSS and a little javascript. Here is something I'm using.
    Code:
    <img src="default.png" id="bigPic" width="320" height="240"
            alt="" />
    
    
    <a href="ksc1.jpg"><img src="tn_ksc1.jpg"
                onmouseover="document.images['bigPic'].src='some.png';"
                width="72" height="54" alt="Item ksc1" /></a>
    Running the mouse over the link causes the called for image to appear in the place of the image id'd as bigPic.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493
    Something like this ?

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    17
    Rep Power
    0
    thank you both, ill look into it
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    2
    Rep Power
    0
    jabba_29,
    I've been searching for some time trying to find a solution for this very problem. So first of all, thank you for this post. I guess it was just a matter of putting in the right search criteria that brought me to this thread.

    I'm fairly new to the world of HTML, so I still have a lot to learn. Using the link you provided in your post I was able to break down the HTML and CSS code to get a pretty good understanding of all the "pieces". There is one thing I was hoping you might be able to clear up for me though.

    The links in the left column all run vertically. In the page I'm trying to create I want my links to run horizontally. However, I'm not seeing anything in your code that identifies the layout. Is this even an option, or would I have to create a separate <div> for each?
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Welcome to DevShed Forums, steball.

    This thread is over 8 years old. While both jabba_29 and kk5st have certainly been active since then, neither has posted here in over 6 months. I will answer your question in their place, however.
    The links in the left column all run vertically. In the page I'm trying to create I want my links to run horizontally. However, I'm not seeing anything in your code that identifies the layout. Is this even an option, or would I have to create a separate <div> for each?
    Displaying vertically in a single column is the default for elements with "display:block". One of the ways to make them display horizontally instead if to give them "float:left".

    These explain how floats work:
    http://css.maxdesign.com.au/floatutorial/
    http://phrogz.net/CSS/understandingfloats.html
    http://www.css-101.org/float/

    I should point out that it's best to markup navigational menus with an unordered-list (a <ul> in which there is a <li> element for each link).

    These three articles explain how to style lists.
    http://www.alistapart.com/articles/taminglists/
    http://css.maxdesign.com.au/listutorial/
    http://www.webreference.com/programming/css_lists/

    This is a step by step tutorial on building a horizontal nav bar:
    Turning a list into a navigation bar


    P.S. Next time instead of posting in a very, very old thread, please create a new one and include a link to the old one.

    Comments on this post

    • medianox agrees : You are a soldier.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    2
    Rep Power
    0
    Thanks Kravvitz! This was a huge help. And I appreciate the tip. I'll remember to do that in future posts.

IMN logo majestic logo threadwatch logo seochat tools logo