quick look effect

**jcnaidu** · 06-26-2007, 05:21 AM

Hi everybody its great to meet all the buddys who believe in gaining Knowledge thru sharing once again my greetings to everybody.

I need a script which looks like in www.gap.com website.

When mouse over of any images ,we can see quick look image and it has mouseover ,mouse down effect also. That is a seperate images they have used.

I was trying in my new website, please any body could help me regarding that quick look type.

**Jas** · 06-27-2007, 12:28 AM

What image are you talking about? The top menu?

EDIT: Oh, I see what you are talking about.
The best way is with CSS and <a> tags. I would check out http://www.w3schools.com/css/css_intro.asp

**jcnaidu** · 06-27-2007, 04:06 PM

Originally Posted by Jas

What image are you talking about? The top menu?

EDIT: Oh, I see what you are talking about.
The best way is with CSS and <a> tags. I would check out http://www.w3schools.com/css/css_intro.asp

Thanks jas but i need the effect like the kind in this http://www.gap.com/browse/category.do?cid=6998(check this site)

When u mouse over on any image it shows quick look image with rollover effects.
It has been done thru javascript using object methods,i am not familiar with this.
Can u help me ragarding this.

I saw your web site, i want to know wether u r a coder r designer.Site is good if u r new to designing and some images are not showing properly.

thanks for your reply.

**Jas** · 06-28-2007, 06:52 PM

Originally Posted by jcnaidu

I saw your web site, i want to know wether u r a coder r designer.Site is good if u r new to designing and some images are not showing properly.

thanks for your reply.

Thanks for the input on the site! I am a coder (and I try to design, but I am not really great at it

), but I work mainly with PHP. I created the site as a prototype using front page. I am creating the actual site now.

As for you, the page you posted was not valid. . .
EDIT: NVM, it's just an error in what you typed. . .

**Jas** · 06-28-2007, 06:56 PM

I stand by what I said about <a> tags and CSS, but if you insist on using JS, I don't know that I can help you much, as I have not had to use that in any of my projects yet.
Here is a sample of the code:

Code:

	<html>
<head>
	<!-- SAMPLE (The real thing can be a lot better, ie you can position is absolutly and place it over the image, and hide it until the user hovers over the image) //-->
	<style type="text/css">
		body{
			background-color: #DDDDDD;
		}a:link#BUTTON1 {
		 	color: #000000;
			background-image: url("YOUR IMAGE");
		}a:hover#BUTTON1 {
		 	color: #999999;
			background-image: url("YOUR IMAGE");
		}a:active#BUTTON1 {
			color: #BBBBBB;
			background-image: url("YOUR IMAGE");
		}div.IMAGES{
			height: 25px;
			width: 100px;
			border-width: 4px;
			border-style: outset;
			cursor: hand;
		}
	</style>
</head>
<body>
	<a id='BUTTON1' href='?'><div class='IMAGES'>LINK</div></a>
</body>
	<html>

Does that do what you need, or do you need JS?

Thread: quick look effect

Thread Tools

Search Thread

quick look effect

Bookmarks

Bookmarks

Posting Permissions