Log in

View Full Version : 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
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
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 :p ), 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:


<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?