Roll-over effect request

@gumbystationFeb 17.2005

I have a special request.

I’m looking to have a <div>. In it:
— a single picture at the top, centered
— below text

What I would like to have a a roll-over effect where you hover over text, and that centered picture changes. I want to display a lot of logo designs that I have. Maybe, instead of that, have miniture pictures (thumbnails) instead of text and the same thing happen.

I’m not sure what kind of code I should use. And from there, I’m not sure how I should go about it. Anyone have ideas for this? Or better, code that I could look at to try out? From what I know…DHTML might be what I’m looking for…

to post a comment

JavaScript

7 Comments(s) _↴

@KorFeb 17.2005 — #Start from this simplified example: You may add as many links/pictures as you need. You may use thumbnails instead of text links.

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <script language="JavaScript" type="text/JavaScript">
 var imag = new Array()//is not compulsory to use indented named pictures
 imag[0] ='00.jpg';
 imag[1] ='01.jpg';
 imag[2] ='02.jpg';
 function slide(a){
 var root = document.getElementById('lin');
 var oA = root.getElementsByTagName('a');
 for(var i=0;i<oA.length;i++){
 if(a==oA[i]){
 document.getElementById('pic').setAttribute('src',imag[i]);break
 }
 }
 }
 </script>
 </head>
 <body>
 <img id="pic" src="00.jpg">
 <br>
 <br>
 <div id="lin">
 <a href="#" onmouseover="slide(this)">pic 1</a><br>
 <a href="#" onmouseover="slide(this)">pic 2</a><br>
 <a href="#" onmouseover="slide(this)">pic 3</a><br>
 </div>
 </body>
 </html>
 [/code]

@cootheadFeb 17.2005 — #Hi there gumbystation,

as variety [i]is the spice of life[/i] you might

like to consider this working example ?

[color=navy]&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;title&gt;image swap&lt;/title&gt;
 
 &lt;meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /&gt;
 [color=purple]
 &lt;base href="http://coothead.homestead.com/files/"/&gt; /*for testing purposes*/
 [/color]
 &lt;style type="text/css"&gt;
 /*&lt;![CDATA[*/
 
 body {
 background:#009;
 }
 #container {
 width:362px;
 border:double 3px #000;
 padding:3px;
 background:#fff;
 margin: 30px auto;
 }
 #big {
 width:360px;
 height:280px;
 display:block;
 border:solid 1px #000;
 }
 #thumbs {
 width:360px;
 height:70px;
 border:solid 1px #000;
 margin-top:3px;
 
 }
 #thumbs img {
 width:90px;
 height:70px;
 display:block;
 float:left;
 }
 
 /*//]]&gt;*/
 &lt;/style&gt;
 
 &lt;script type="text/javascript"&gt;
 //&lt;![CDATA[
 
 function swapImg (image) {
 document.getElementById("big").src=image;
 }
 
 //]]&gt;
 &lt;/script&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div id="container"&gt;
 
 &lt;img id="big" src="apple.jpg" alt="" /&gt;
 
 &lt;div id="thumbs"&gt;
 &lt;img src="apple.jpg" alt="" onmouseover="swapImg(this.src)"/&gt;
 &lt;img src="banana.jpg" alt=""  onmouseover="swapImg(this.src)"/&gt;
 &lt;img src="dog.jpg" alt="" onmouseover="swapImg(this.src)"/&gt;
 &lt;img src="ten_quid.jpg" alt=""  onmouseover="swapImg(this.src)"/&gt;
 &lt;/div&gt;
 
 &lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;
 
 [/color]

[i]coothead[/i]

@KorFeb 17.2005 — #Any way, variety ot not, the main ideea is the same: modifying dynamically the SRC of the element...?

@gumbystationauthorFeb 17.2005 — #Thanks guys! Your great!!! I'll try both out and let you know which I use.

@gumbystationauthorFeb 17.2005 — #[i]Originally posted by Kor [/i]

[B]Start from this simplified example: You may add as many links/pictures as you need. You may use thumbnails instead of text links.

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <script language="JavaScript" type="text/JavaScript">
 var imag = new Array()//is not compulsory to use indented named pictures
 imag[0] ='00.jpg';
 imag[1] ='01.jpg';
 imag[2] ='02.jpg';
 function slide(a){
 var root = document.getElementById('lin');
 var oA = root.getElementsByTagName('a');
 for(var i=0;i<oA.length;i++){
 if(a==oA[i]){
 document.getElementById('pic').setAttribute('src',imag[i]);break
 }
 }
 }
 </script>
 </head>
 <body>
 <img id="pic" src="00.jpg">
 <br>
 <br>
 <div id="lin">
 <a href="#" onmouseover="slide(this)">pic 1</a><br>
 <a href="#" onmouseover="slide(this)">pic 2</a><br>
 <a href="#" onmouseover="slide(this)">pic 3</a><br>
 </div>
 </body>
 </html>
 [/code]

[/B][/QUOTE]

Your code didn't work. No picture pops up. I have a test page at:

[URL=http://www2.onu.edu/~j-smith.6/test.htm]http://www2.onu.edu/~j-smith.6/test.htm[/URL]

@gumbystationauthorFeb 17.2005 — #[i]Originally posted by coothead [/i]

[B]Hi there gumbystation,

as variety [i]is the spice of life[/i] you might

like to consider this working example ?

[code][color=navy]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>image swap</title>
 
 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
 [color=purple]
 <base href="http://coothead.homestead.com/files/"/> /*for testing purposes*/
 [/color]
 <style type="text/css">
 ........
 [i]coothead[/i] [/B][/QUOTE] 
 As of right now, this is the code that is working!!  And working amazingly!  [URL=http://www2.onu.edu/~j-smith.6/test_css.html]http://www2.onu.edu/~j-smith.6/test_css.html[/URL]

@KorFeb 18.2005 — #
Your code didn't work.
[/quote]
Probably you did something wrong, as the code [b]is[/b] working... Anyway, we all are glad that your problem is solved ?

Also in #JavaScript _↴

Changing the width and height of a video Sending function name as parameter to another function function only executing once

Success!

Help @gumbystation spread the word by sharing this article on Twitter...

Tweet This

Roll-over effect request

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Roll-over effect request

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴