1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. The forum has been upgraded to a more recent and user-friendly software, called "XenForo".
    It will take some time to get everything set up and running smoothly, so please report any bug you may find to the forum staff.
    Thank you for your patience.

need some minor html/css help

Discussion in 'Code Snippets and Tutorials' started by Rise and Fall, Mar 1, 2010.

  1. Rise and Fall

    Rise and Fall Well-Known Member

    Joined:
    Dec 22, 2009
    Messages:
    1,790
    Likes Received:
    101
    i have an image that is a link

    i want it to change to a different picture when i mouse over

    is there an easy way to do this?
     
  2. Zer0

    Zer0 New Member

    Joined:
    Mar 2, 2008
    Messages:
    3,037
    Likes Received:
    180
    Location:
    Home sweet home
    Yup, some simple javascript should do the trick:
    Code (Text):
    1.  
    2. <a href="url here" onmouseover="document.rollover.src='new_img_url'" onmouseout="document.rollover.src='old_img_url'"><img src="old_img_url" name="rollover"></a>
    3.  
    Replace "old_img_url" and "new_img_url" with your images. :)
     
  3. Rise and Fall

    Rise and Fall Well-Known Member

    Joined:
    Dec 22, 2009
    Messages:
    1,790
    Likes Received:
    101
    ya i saw that
    im not sure if im allowed to use js in my assignment, is there any other way to do it?
     
  4. Zer0

    Zer0 New Member

    Joined:
    Mar 2, 2008
    Messages:
    3,037
    Likes Received:
    180
    Location:
    Home sweet home
    Rise and Fall likes this.
  5. Junior

    Junior Administrator
    Staff Member

    Joined:
    Nov 8, 2009
    Messages:
    3,350
    Likes Received:
    169
    Location:
    I come from a land down under! (Maaaate!)
  6. Rise and Fall

    Rise and Fall Well-Known Member

    Joined:
    Dec 22, 2009
    Messages:
    1,790
    Likes Received:
    101
    ill check that out

    thanks
     
  7. Shawn

    Shawn Well-Known Member

    Joined:
    Jul 15, 2009
    Messages:
    1,986
    Likes Received:
    76
    Location:
    Somewhere, lah.
    Yess CSS rollovers involved putting the two pictures on top of each other,
    with display: block;
    and then when hover, the position changes, many tutorials on google
     
  8. Rise and Fall

    Rise and Fall Well-Known Member

    Joined:
    Dec 22, 2009
    Messages:
    1,790
    Likes Received:
    101
    ok so apparently im not allowed to use any css or java...now i have to essentially rewrite my whole page...and im lost

    when he says to use "inline styles", what does that mean?
     
  9. Shawn

    Shawn Well-Known Member

    Joined:
    Jul 15, 2009
    Messages:
    1,986
    Likes Received:
    76
    Location:
    Somewhere, lah.
    inline styles IS css. Shoot your teacher.
    EDIT: After thinking about it, don't shoot your teacher. I might get into trouble for spurring you on. :lol:
     
  10. Rise and Fall

    Rise and Fall Well-Known Member

    Joined:
    Dec 22, 2009
    Messages:
    1,790
    Likes Received:
    101
    sorry its done...the police are coming after shawn from neofriends.net

    id run and hide if i were you

    so my code looks somewhat like this

    <style type=text/css>

    body {
    font: 9px verdana;
    color: #ffffff;
    }

    and then theres other things in here, like dimensions for one of my div layers, link colors, and other shit...

    </style>

    this is all just inline styles?
    does type=text/css need to be there?
     
  11. Zer0

    Zer0 New Member

    Joined:
    Mar 2, 2008
    Messages:
    3,037
    Likes Received:
    180
    Location:
    Home sweet home
    Yeah, inline styles are still CSS... >_>

    If you are using "<style>" tags, then its not inline. Inline means that the style is done inside the element that's being styled. So like:
    Code (Text):
    1.  
    2. <img src="asdf" style="[styling goes here]">
    3.  
     
  12. Rise and Fall

    Rise and Fall Well-Known Member

    Joined:
    Dec 22, 2009
    Messages:
    1,790
    Likes Received:
    101
    ok so this is what im supposed to do?

    Code (Text):
    1. <div id="Layer1" style="position:absolute; OVERFLOW: auto; WIDTH: 403px; HEIGHT: 305px; z-index:1; left: 250px; top: 400px;">
     
  13. Zer0

    Zer0 New Member

    Joined:
    Mar 2, 2008
    Messages:
    3,037
    Likes Received:
    180
    Location:
    Home sweet home
    Well that's the idea. I can't tell you if the styling is correct though :p
     
  14. Rise and Fall

    Rise and Fall Well-Known Member

    Joined:
    Dec 22, 2009
    Messages:
    1,790
    Likes Received:
    101
    ya thats just from an old piece of code, i used to do everything like that...but i found the other way much easier and well organized
     
  15. Rise and Fall

    Rise and Fall Well-Known Member

    Joined:
    Dec 22, 2009
    Messages:
    1,790
    Likes Received:
    101
    Code (Text):
    1. <style>
    2.  
    3. a:link {
    4. font: 12px verdana; color: #000000; text-decoration: none; }
    5. a:visited {
    6. font: 12px verdana; color: #000000; text-decoration: none; }
    7. a:active {
    8. font: 12px verdana; color: #000000; text-decoration: none; }
    9. a:hover {
    10. font: 12px verdana; color: #000000; text-decoration: none; }
    11. </style>
    i wanna convert that into inline styles

    how would i do that?

    oops i didnt realize i had the last post...can a mod please merge the 2 posts?
     
  16. Shawn

    Shawn Well-Known Member

    Joined:
    Jul 15, 2009
    Messages:
    1,986
    Likes Received:
    76
    Location:
    Somewhere, lah.

Share This Page