could you help me in (CSS) to make scrolling images - Webmaster Forum

10-06-2006, 11:25 AM

sharif_aly

Status: I'm new around here
Join date: Oct 2006
Location:
Expertise:
Software:

Posts: 3

iTrader: 0 / 0%

sharif_aly is on a distinguished road

could you help me in (CSS) to make scrolling images

what i'm trying to do is scrolling images and zoom in same time and when mouse over on an image zoom in and make effect.

also on mouse over stop scrolling..

and i'm trying to do it Using CSS .. so if you know please ,

Here is the full code >>>

Code:

<style type="text/css">
body {
  
.r{}
div table td font {display: none;} a img {filter:alpha(opacity=75); -moz-opacity:0.6; opacity:0.6; -khtml-opacity:0.6;}

a:hover img {filter:none; -moz-opacity:1.0; opacity:1.0; -khtml-opacity:1.0;} 

#zoom img:hover {
width:300px;
height:225px;
}

#footer {
    color: #999;
    }

 </style>

<marquee height="79" scrollamount=3 scrolldelay=90 onmouseover='this.stop()' onmouseout='this.start()'>

<img border="0" src="anyimage.jpg" width="110" height="150">

</marquee></p>
</body>

10-07-2006, 07:55 AM

Julian

Status: Simply to simplify
Join date: Apr 2005
Location: Foxton, Manawatu, New Zealand
Expertise:
Software:

Posts: 5,572

iTrader: 0 / 0%

Julian is on a distinguished road

Thats javascript you have there, not css.

10-07-2006, 10:35 AM

Bas

Status: I love this place
Join date: Jan 2005
Location: The Netherlands
Expertise: Frontend, vBulletin
Software: Coda, Photoshop

Posts: 607

iTrader: -1 / 0%

Bas is on a distinguished road

I changed your code a bit and it worked for me:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Test</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	
<style type="text/css" media="all">
div table td font {
  display: none;
}

a img {
  filter: alpha(opacity=75);
  -moz-opacity: 0.6;
  opacity: 0.6;
  -khtml-opacity: 0.6;
}

a:hover img {
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0
  -khtml-opacity: 1.0;
  width: 300px;
  height: 225px;
}

#footer {
  color: #999;
}
</style>

</head>
<body>

<a href="#"><img border="0" src="anyimage.jpg" alt="" /></a>

</body>
</html>