How to - DIV, mouseover hover and url dynamic displays

[LtJerryMouse]

Hello All -

I am not sure if this done via CSS or JavaScript, so I will post in both forums. Does anyone know and can provide any code example of the mouseover hovering effect as on the following page?

http://www.adobe.com/products/?ogn=EN_US-gn_prod

When you hover your mouse on a product item, it displays the options for
* Buy * Try * Learn more

Appreciate any help on this.

Thanks,

Lt. Jerry Mouse

[Medyman]

It's a combination of Javascript and CSS, actually.

The javascript uses something like this: http://blog.movalog.com/a/javascript-toggle-visibility/

The CSS is using anchor pseduo classes.


P.S. Please don't double post. If you've posted in the wrong forum, the moderators will move it accordingly.

[AmenKa]

Hi, do you want to know how to do that, or do you want someone to do it for you? I can do that using only css, if you would like. I don't have time at the moment, but I will post some example code at school.

[Medyman]

Hi, do you want to know how to do that, or do you want someone to do it for you? I can do that using only css, if you would like. I don't have time at the moment, but I will post some example code at school.

We stress learning here. If you want to go around writing scripts for people, that's your perogative. But, in my opinion, that accomplishes nothing constructive. It would be much better if the OP looked at the links I posted, tried to make it work. If it doesn't work, post the code he's working with and someone will be delighted to help him to get it to work. The key there is though that someone tried and is genuinely making an effort.

Lt. Jerry Mouse, this isn't directed at you. I'm just making a general point.

[AmenKa]

We stress learning here. You want to go around writing scripts for people, that your perogative. But, in my opinion, that accomplishes nothing constructive. It would be much better if the OP looked at the links I posted, tried to make it work. If it doesn't work, post the code he's working with and someone will be delighted to tell him what the problem is. The key there is though that someone tried and is genuinely making an effort.

Lt. Jerry Mouse, this isn't directed at you. I'm just making a general point.

Not to be an ass, but CSS is a style language (with rollover functionality)... Also, may I point out this is the thread for 'Looking for such script or service'. Many people learn by example. While I offered to show him how to make it with CSS, I in no way ment that I would do it for him and I am sorry if I implied that I would. I do not have the time to do all of it for him. Below is an example of one (might have glitches since I am not in a place to test it at the moment). I will play with it untill you have the source of a working example (when I get home), It is up to you to learn from the example and modify it to produce all of the links you would like.

Style

#example {
    width:150px;
    height:64px;
    background-color:#FFFFFF;
    background-image:example.png;
    background position:top left;
    color:#FFFFFF;
    text-decoration:none;
}
#example:hover {
    background-color:#666666;
    color:#000000;
    text-decoration:underline;
}

xhtml:

<div id="example">
I think when I get home I will get rid of the background image and place one here, since the desired goal links the image to the about page.
<br />
<a href="buy.php">Buy</a> <a href="about.php">About</a>
<br />
This would appear below the links. I will also write more than one set of properties, since the two links above probably will underline before the cursor is directly on the text. 
</div>

Now the above is just a bit of a start. I strongly encourage you to fly with it to produce your own version (with some modification, I do not think it will work by itself exactly as stated). I will create a fully working version when I get home (in about 6 hours). Consider this a preview. I will create one working one, and you will have to modify it to work with the rest of your items if you choose to use it.

Medyman, I am sorry if you consider this not teaching. I am rather insulted though as the two links you posted lead to examples writen in a similar fashion (copy this and alter it to use with all of your items).

[Medyman]

Sorry if you're insulted. I apologize. Your first post sounded like you were just going to do the whole thing for them. You didn't say, "do you want me to show you how to get started". You said, "do you want someone to do it for you". I misunderstood your intent, I'm sorry. But let's not take this tread off-topic.

To your CSS, it won't work in IE6. Thus, the need for javascript in this instance. It will work in modern browsers, though. I mean this in theory, I haven't actually tested it.

[LtJerryMouse]

I had meant if someone can point to an example on how it is done in a simplistic way, similar to other working examples posted at DynamicDrive.com. I can then pick it up and make it work as I need. The adobe example is good, but seems overly complicated, plus I can't and did not want to use their code.

Thanks for posting the sample code snippet. I will give it a try and post my results.

[AmenKa]

Sorry if you're insulted. I apologize. Your first post sounded like you were just going to do the whole thing for them. You didn't say, "do you want me to show you how to get started". You said, "do you want someone to do it for you". I misunderstood your intent, I'm sorry. But let's not take this tread off-topic.

To your CSS, it won't work in IE6. Thus, the need for javascript in this instance. It will work in modern browsers, though. I mean this in theory, I haven't actually tested it.

Ok, I am sorry as well for my poor choice in words.

Back to the code:

I will add code here as soon as I have a good working version. I do not know if Medyman is correct and it will not work in IE6, but it is a good place to start for FX2 and IE7.

[Medyman]

IE6 doesn't support the :hover pseudo class on anything other than anchors and some form elements. So you can't use the hover technique with that.

The solution would be to use some javascript, as I linked to above. The below should get you started. It doesn't degrade for javascript-less browsers, so that'll need to be added.

Using a CSS-only solution is more trouble than it's worth, in my opinion. Especially given the level of CSS support currently in IE. If we full CSS2 support, this would be a simple enough task with just CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Example CSS</title>

<style type="text/css">
#container { 
	background:#fff;  /* Initial Background Color */
	width:300px;  /* Height */
	height:80px;  /* Width */
	padding:10px;  
	overflow:hidden; 
}

#container:hover { 
	background:#eee;   /* Background color when you mouse over */
	cursor:pointer;  /* Turn cursor to hand */
}

#container p { 
	display:none;   /* Hide Links Initially */
}


/* Example Formatting Only -- DISREGARD */
#container img { float:left; margin-right:7px; }
#container h1 { margin:0; padding:3px 0 0 0; font:bold 17px Arial; }
#container a { margin:0; padding:0; font:normal 15px Arial; text-decoration:none; color:#444; }
#container p { margin-left:55px; margin-top:5px; }
#container p a { font:bold 12px Arial; }
#container p a:hover { text-decoration:underline }
</style>

<script type="text/javascript">
<!--

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>


</head>
<body>

<div id="container" onMouseOver="toggle_visibility('links');" onMouseOut="toggle_visibility('links');">
	<img src="http://www.adobe.com/images/shared/product_mnemonics/48x45/master_collection_48x45.jpg" alt="image" />
	<h1>Adobe</h1>
	<a href="#">Creative Suite 3 Master Collection</a>
	
	<p id="links"><a href="#">Buy</a> | <a href="#">Try</a> | <a href="#">Learn More</a></p>
	
</div>


</body>
</html>

You don't need to worry about the CSS where I've written to disregard. That's only to make the example look good. It has no functional value.

[AmenKa]

I wont bother to post the code I have, Medyman got to it before me