Thread: css rollover

Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    972
    Rep Power
    11

    css rollover


    I have this code which changes text into a image, but how do I have an image instead of text? I mean so everythings images and no text.

    <style type="text/css">

    #nav a:hover {
    background: url("arrow_hover.png") no-repeat;
    }


    #nav a img {
    width: 88px;
    height: 67px;
    position: absolute;
    top: 200px;
    left: 500px;
    border: 1px solid black;
    visibility: hidden;
    }

    #nav a:hover img {
    visibility:visible;
    }
    </style>

    <div id="nav">


    <ul>


    <li><a href="#">Link1<img src="camera.jpg" alt="" /></a>


    <li><a href="#">Link2<<img src="home.png" alt="" /></a></li>


    <li><a href="#">Link3<<img src="camera.jpg" alt="" /></a></li>


    <li><a href="#">Link4<<img src="johnpotter.jpg" alt="" /></a></li>


    </ul>
    </div>
  2. #2
  3. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2004
    Location
    0ffice[c0mput3r] || (Uni())
    Posts
    543
    Rep Power
    11

    Change a couple of things...


    Hi,

    Try changing your BODY section with this:

    Code:
    <body>
    	<div id="nav">
    		<ul>
    		<li><a href="#"><img src="camera.jpg" alt="">Some text #1</a></li>
    		<li><a href="#"><img src="home.png" alt="">Some text #2</a></li>
    		<li><a href="#"><img src="camera.jpg" alt="">Some text #3</a></li>
    		</ul>
    	</div>
    </body>
    I'm quite sure it will work.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    972
    Rep Power
    11
    Thanks, but how do i replace the text with images? I put in a normal image tag, but it stops it all from working.
  6. #4
  7. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2004
    Location
    0ffice[c0mput3r] || (Uni())
    Posts
    543
    Rep Power
    11
    toolman,

    do you want it in a first stage to replace IMG with TEXT, and in another to do the inverse?

    ... or do you just simply want to display IMG instead of TEXT?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    972
    Rep Power
    11
    Hi, i just want to display img instead of text... so there's no text at all.


    Originally posted by #ShAm4n
    toolman,

    do you want it in a first stage to replace IMG with TEXT, and in another to do the inverse?

    ... or do you just simply want to display IMG instead of TEXT?
    Last edited by toolman; February 7th, 2004 at 06:12 AM.
  10. #6
  11. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2004
    Location
    0ffice[c0mput3r] || (Uni())
    Posts
    543
    Rep Power
    11
    Ok then, try this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <div id="nav">
    <ul>
    	<li><a href="#"><img src="camera.jpg" alt="" /></a>
    	<li><a href="#"><img src="home.png" alt="" /></a></li>
    	<li><a href="#"><img src="camera.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="johnpotter.jpg" alt="" /></a></li>
    </ul>
    </div>
    </body>
    </html>

    After you've tried it, Hit me back.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    972
    Rep Power
    11
    Hi,
    Thanks for that!

    I'm also using this script aswell, but i want the second image to appear somewhere else on the page. How would i do that?

    <style type='text/css'>

    a.rollover{background-image:url('arrow_hover.png'); width:20px; height:20px;}

    a.rollover:hover{background-image:url('home.gif'); width:20px; height:20px;} </style>


    <a class='rollover' href='#'></a>
  14. #8
  15. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2004
    Location
    0ffice[c0mput3r] || (Uni())
    Posts
    543
    Rep Power
    11
    Sorry for taking all this time but I had to have some sleep.

    I've only just seen your reply and I think that you'll be okay with something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    
    <style type='text/css'> 
    #rollover
    {
    	width: 88px; 
    	height: 67px;
    	position: absolute;
    	top: 200px;
    	left: 500px;
    	visibility: hidden;
    }
    </style>
    
    
    <div id="rollover"><img src="whatever.jpg" alt=""></div>
    <div id="nav">
    
    <ul>
    	<li><a href="#"><img src="camera.jpg" alt="" onMouseOver="document.all.rollover.style.visibility='visible';" onMouseOut="document.all.rollover.style.visibility='hidden';"></a>
    	<li><a href="#"><img src="home.png" alt="" onMouseOver="document.all.rollover.style.visibility='visible';" onMouseOut="document.all.rollover.style.visibility='hidden';"></a></li>
    	<li><a href="#"><img src="camera.jpg" alt="" onMouseOver="document.all.rollover.style.visibility='visible';" onMouseOut="document.all.rollover.style.visibility='hidden';"></a></li>
    	<li><a href="#"><img src="johnpotter.jpg" alt="" onMouseOver="document.all.rollover.style.visibility='visible';" onMouseOut="document.all.rollover.style.visibility='hidden';"></a></li>
    </ul>
    </div>
    </body>
    </html>

    How about that? Does it work fine?
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    972
    Rep Power
    11
    Thanks! That's exactly what I was looking for
  18. #10
  19. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2004
    Location
    0ffice[c0mput3r] || (Uni())
    Posts
    543
    Rep Power
    11
    I am glad I was helpful.

    Cheers,
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    972
    Rep Power
    11
    Hi,

    With the script, people say its not working in NS4 or Mozilla. Is it possible to make it work in all browsers?


    <style type='text/css'>

    #rollover
    {

    position: absolute;
    top: 323px;
    left: 111px;
    visibility: hidden;
    }


    #rollover2
    {

    position: absolute;
    top: 323px;
    left: 102px;
    visibility: hidden;
    }

    #rollover3
    {

    position: absolute;
    top: 323px;
    left: 102px;
    visibility: hidden;
    }



    #rollover4
    {

    position: absolute;
    top: 323px;
    left: 111px;
    visibility: hidden;
    }



    #rollover5
    {

    position: absolute;
    top: 323px;
    left: 112px;
    visibility: hidden;
    }



    #rollover6
    {

    position: absolute;
    top: 323px;
    left: 104px;
    visibility: hidden;
    }
    </style>

    <div id="rollover"><img src="home.png" width="41" height="12" alt=""></div>

    <div id="rollover2"><img src="services.png" width="61" height="11" alt=""></div>

    <div id="rollover3"><img src="portfolio.png" width="60" height="12" alt=""></div>

    <div id="rollover4"><img src="prices.png" width="43" height="11" alt=""></div>

    <div id="rollover6"><img src="contact.png" width="56" height="12" alt=""></div>

    <div id="rollover5"><img src="about.png" width="44" height="12" alt=""></div>



    <div id="nav">



    <div style="position:absolute; top:104; left:119;">
    <a href="#"><img src="arrow_hover.png" border="0" alt="Home" onMouseOver="document.all.rollover.style.visibility='visible';" onMouseOut="document.all.rollover.style.visibility='hidden';"></a>
    </div>





    <div style="position:absolute; top:139; left:185;">
    <a href="#"><img src="arrow_hover.png" border="0" alt="Services" onMouseOver="document.all.rollover2.style.visibility='visible';" onMouseOut="document.all.rollover2.style.visibility='hidden';"></a>
    </div>




    <div style="position:absolute; top:217; left:185;">
    <a href="#"><img src="arrow_hover.png" border="0" alt="Portfolio" onMouseOver="document.all.rollover3.style.visibility='visible';" onMouseOut="document.all.rollover3.style.visibility='hidden';"></a>
    </div>





    <div style="position:absolute; top:247; left:119;">
    <a href="#"><img src="arrow_hover.png" border="0" alt="Prices" onMouseOver="document.all.rollover4.style.visibility='visible';" onMouseOut="document.all.rollover4.style.visibility='hidden';"></a>
    </div>




    <div style="position:absolute; top:139; left:53;">
    <a href="#"><img src="arrow_hover.png" border="0" alt="About" onMouseOver="document.all.rollover6.style.visibility='visible';" onMouseOut="document.all.rollover6.style.visibility='hidden';"></a>
    </div>



    <div style="position:absolute; top:217; left:53;">
    <a href="#"><img src="arrow_hover.png" border="0" alt="Contact" onMouseOver="document.all.rollover5.style.visibility='visible';" onMouseOut="document.all.rollover5.style.visibility='hidden';"></a>
    </div>
    </div>
  22. #12
  23. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2004
    Location
    0ffice[c0mput3r] || (Uni())
    Posts
    543
    Rep Power
    11
    Hi

    ok then, download the attached HTML file, render it and tell me how it behaves -- I've not tried it out.
    Attached Files
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    972
    Rep Power
    11
    Thanks, but the files blank - not source code or anything
  26. #14
  27. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2004
    Location
    0ffice[c0mput3r] || (Uni())
    Posts
    543
    Rep Power
    11

    Thumbs up Should work now!


    What?!! It's this stupid Windows of mine... been behaving strangely lately!

    Right then, hope this works out now.
    Attached Files
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    972
    Rep Power
    11
    Thanks... the file works, but theres no imagaes appearing on the mouseover.. also a error on line 85, char 1 which i cant seem to find.
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo