Drop down menu

@olafur89Oct 22.2008

Hi..

I have a proplem that I have been trying to search on the internet for a solution, but I haven’t been able to find one, so I hope that somebody can heelp me.

I have a picture called: “furniture.jpg”. What I am trying to find a code for is: On mouse over on “furniture.jpg” I want to change image to “furniture1.jpg”. Also I want 5 other picture to appear below. Pictures called “1.jpg”, “2.jpg” … “5.jpg”. I want these picture to change as well to “1a.jpg” 2a.jpg”… “5a.jpg”..

This is like a drop down menu. Can somebody help me? I relly need help on this, since I am not very good at javaScript

to post a comment

JavaScript

4 Comments(s) _↴

@JMRKEROct 22.2008 — #Do you have a script attempt to view or start to analyze?

@blade54035Oct 23.2008 — #so you want it were if you put the mouse over the one picture it changes and pictures drop down below it? the a few seconds after they change? or am I wrong? or do you just want pictures to drop down when the first picture is hovered on? (I pretty sure I can do this for you with a code I wrote not to long ago) lol..JMKER, remember that? it was my navigation bar, thanks again for your help. ?

@blade54035Oct 23.2008 — #I am sure this is not exactly what you want....but it is a quick code that I wrote that does make a drop down...

[B]This goes in the Head tag[/B]

[code=php]
 <style type="text/css">
 .hide {
 visibility: hidden;
 }
 
 .view {
 visibility: visible;
 }
 
 .size {
 height: 101px;
 width: 51px;
 }
 
 .pic {
 height: 100px;
 width: 200px;
 }
 </style>
 <script type="text/javascript">
 function onpic()
 {
 document.getElementById("fr").className="view";
 document.getElementById("fr1").className="view";
 document.getElementById("fr2").className="view";
 document.getElementById("fr3").className="view";
 document.getElementById("fr4").className="view";
 }
 
 function offpic()
 {
 document.getElementById("fr").className="view";
 document.getElementById("fr1").className="hide";
 document.getElementById("fr2").className="hide";
 document.getElementById("fr3").className="hide";
 document.getElementById("fr4").className="hide";
 }
 
 </script>
 [/code]

[B]And this goes in the Body tag[/B]

[code=php]
 <div align="center">
 <div class="size" onmouseover="onpic()" onmouseout="offpic()">
 <div class="view" id="fr">
 <img src="furniture.jpg" class="pic" />
 </div>
 <div class="hide" id="fr1">
 <img src="1.jpg" class="pic" />
 </div>
 <div class="hide" id="fr2">
 <img src="2.jpg" class="pic" />
 </div>
 <div class="hide" id="fr3">
 <img src="3.jpg" class="pic" />
 </div>
 <div class="hide" id="fr4">
 <img src="4.jpg" class="pic" />
 </div>
 </div>
 </div>
 [/code]

Over all, what it really does is hide the pictures till you unhide them (mouse over)...thus giving it the apearance of a dropdown. If you would like me to tweak it, just let me know what else you want it to do and I will do my best ? I like the practice ?

@JMRKEROct 23.2008 — #You seem to be a quick learner 'blade54035', nice start ?

I modified your code below to add a little more functionality.

Easy to add additional horizontal/vertical images acting as a drop-down menu.

OP can add some links if needed within the <div> tags if they want additional navigation selections.

I don't like to waste real estate with the visibility CSS, hence the change to display. Either one is acceptable.

[code=php]
 <html>
 <head>
 <title>Rollover Dropdown Again</title>
 
 <style type="text/css">
 .hide { display:none; }
 .view { display:block; }
 /*
 .hide { visibility: hidden; }
 .view { visibility: visible; }
 */
 .size {
 height: 101px;
 width: 151px;
 }
 .pic {
 height: 100px;
 width: 150px;
 }
 </style>
 
 <script type="text/javascript">
 function onpic(p,p1,p2,p3,p4) {
 document.getElementById(p).className="view";
 document.getElementById(p1).className="view";
 document.getElementById(p2).className="view";
 document.getElementById(p3).className="view";
 document.getElementById(p4).className="view";
 }
 function offpic(p,p1,p2,p3,p4) {
 document.getElementById(p).className="view";
 document.getElementById(p1).className="hide";
 document.getElementById(p2).className="hide";
 document.getElementById(p3).className="hide";
 document.getElementById(p4).className="hide";
 }
 </script>
 
 </head>
 <body>
 <table border="0">
 <tr><td valign="top">
 <div class="size" onmouseover="onpic('fr','fr1','fr2','fr3','fr4')" onmouseout="offpic('fr','fr1','fr2','fr3','fr4')">
 <div class="view" id="fr"><img src="furniture.jpg" class="pic" /></div>
 <div class="hide" id="fr1"><img src="f1.jpg" class="pic" /></div>
 <div class="hide" id="fr2"><img src="f2.jpg" class="pic" /></div>
 <div class="hide" id="fr3"><img src="f3.jpg" class="pic" /></div>
 <div class="hide" id="fr4"><img src="f4.jpg" class="pic" /></div>
 </div>
 </td><td valign="top"> 
 <div class="size" onmouseover="onpic()" onmouseout="offpic()">
 <div class="size" onmouseover="onpic('br','br1','br2','br3','br4')" onmouseout="offpic('br','br1','br2','br3','br4')">
 <div class="view" id="br"><img src="bedroom.jpg" class="pic" /></div>
 <div class="hide" id="br1"><img src="b1.jpg" class="pic" /></div>
 <div class="hide" id="br2"><img src="b2.jpg" class="pic" /></div>
 <div class="hide" id="br3"><img src="b3.jpg" class="pic" /></div>
 <div class="hide" id="br4"><img src="b4.jpg" class="pic" /></div>
 </div>
 </td><td valign="top"> 
 <div class="size" onmouseover="onpic()" onmouseout="offpic()">
 <div class="size" onmouseover="onpic('kr','kr1','kr2','kr3','kr4')" onmouseout="offpic('kr','kr1','kr2','kr3','kr4')">
 <div class="view" id="kr"><img src="kitchen.jpg" class="pic" /></div>
 <div class="hide" id="kr1"><img src="k1.jpg" class="pic" /></div>
 <div class="hide" id="kr2"><img src="k2.jpg" class="pic" /></div>
 <div class="hide" id="kr3"><img src="k3.jpg" class="pic" /></div>
 <div class="hide" id="kr4"><img src="k4.jpg" class="pic" /></div>
 </div>
 </td></tr>
 </table>
 </body>
 </html>
 [/code]

We still don't know if it fits the OP needs, but all they need to do is substitute a correct path/filename.jpg into the tables.

Also in #JavaScript _↴

Script code for duplicating count result HREF with MouseOver

Success!

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

Tweet This

Drop down menu

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Drop down menu

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴