CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

css rollover

Discuss css rollover in the CSS Help forum on Dev Shed.
css rollover Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Page 1 of 2 1 2 >
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old February 6th, 2004, 01:10 PM
toolman toolman is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jan 2004
Posts: 780 toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 4 Days 5 h 20 m 3 sec
Reputation Power: 5
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>
Reply With Quote
  #2  
Old February 6th, 2004, 03:18 PM
#ShAm4n's Avatar
#ShAm4n #ShAm4n is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Feb 2004
Location: 0ffice[c0mput3r] || (Uni())
Posts: 543 #ShAm4n User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 8 h 50 m 8 sec
Reputation Power: 5
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.
Reply With Quote
  #3  
Old February 6th, 2004, 04:50 PM
toolman toolman is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jan 2004
Posts: 780 toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 4 Days 5 h 20 m 3 sec
Reputation Power: 5
Thanks, but how do i replace the text with images? I put in a normal image tag, but it stops it all from working.
Reply With Quote
  #4  
Old February 6th, 2004, 06:41 PM
#ShAm4n's Avatar
#ShAm4n #ShAm4n is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Feb 2004
Location: 0ffice[c0mput3r] || (Uni())
Posts: 543 #ShAm4n User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 8 h 50 m 8 sec
Reputation Power: 5
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?
Reply With Quote
  #5  
Old February 7th, 2004, 06:01 AM
toolman toolman is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jan 2004
Posts: 780 toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 4 Days 5 h 20 m 3 sec
Reputation Power: 5
Hi, i just want to display img instead of text... so there's no text at all.


Quote:
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.
Reply With Quote
  #6  
Old February 7th, 2004, 03:23 PM
#ShAm4n's Avatar
#ShAm4n #ShAm4n is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Feb 2004
Location: 0ffice[c0mput3r] || (Uni())
Posts: 543 #ShAm4n User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 8 h 50 m 8 sec
Reputation Power: 5
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.
Reply With Quote
  #7  
Old February 7th, 2004, 04:40 PM
toolman toolman is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jan 2004
Posts: 780 toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 4 Days 5 h 20 m 3 sec
Reputation Power: 5
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>
Reply With Quote
  #8  
Old February 7th, 2004, 06:40 PM
#ShAm4n's Avatar
#ShAm4n #ShAm4n is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Feb 2004
Location: 0ffice[c0mput3r] || (Uni())
Posts: 543 #ShAm4n User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 8 h 50 m 8 sec
Reputation Power: 5
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?
Reply With Quote
  #9  
Old February 8th, 2004, 07:57 AM
toolman toolman is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jan 2004
Posts: 780 toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 4 Days 5 h 20 m 3 sec
Reputation Power: 5
Thanks! That's exactly what I was looking for
Reply With Quote
  #10  
Old February 8th, 2004, 09:14 AM
#ShAm4n's Avatar
#ShAm4n #ShAm4n is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Feb 2004
Location: 0ffice[c0mput3r] || (Uni())
Posts: 543 #ShAm4n User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 8 h 50 m 8 sec
Reputation Power: 5
I am glad I was helpful.

Cheers,
Reply With Quote
  #11  
Old February 9th, 2004, 06:04 AM
toolman toolman is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jan 2004
Posts: 780 toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 4 Days 5 h 20 m 3 sec
Reputation Power: 5
Hi,

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

Quote:

<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>
Reply With Quote
  #12  
Old February 9th, 2004, 09:20 AM
#ShAm4n's Avatar
#ShAm4n #ShAm4n is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Feb 2004
Location: 0ffice[c0mput3r] || (Uni())
Posts: 543 #ShAm4n User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 8 h 50 m 8 sec
Reputation Power: 5
Hi

ok then, download the attached HTML file, render it and tell me how it behaves -- I've not tried it out.
Attached Files
File Type: htm rollover.htm (0 Bytes, 253 views)
Reply With Quote
  #13  
Old February 9th, 2004, 10:08 AM
toolman toolman is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jan 2004
Posts: 780 toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 4 Days 5 h 20 m 3 sec
Reputation Power: 5
Thanks, but the files blank - not source code or anything
Reply With Quote
  #14  
Old February 9th, 2004, 10:12 AM
#ShAm4n's Avatar
#ShAm4n #ShAm4n is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Feb 2004
Location: 0ffice[c0mput3r] || (Uni())
Posts: 543 #ShAm4n User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 8 h 50 m 8 sec
Reputation Power: 5
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
File Type: htm rollovers.htm (2.9 KB, 332 views)
Reply With Quote
  #15  
Old February 9th, 2004, 10:33 AM
toolman toolman is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jan 2004
Posts: 780 toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level)toolman User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 4 Days 5 h 20 m 3 sec
Reputation Power: 5
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.
Reply With Quote
Reply
Page 1 of 2 1