Welcome Guest ( Log In | Register )




                Web Hosting Guide

3 Pages V   1 2 3 >  
 Reply to this topicNew Topic
Image Popup On Mouseover
Eggie
post Feb 19 2008, 11:40 PM
Post #1


Premium Member
Group Icon

Group: [HOSTED]
Posts: 258
Joined: 19-January 08
From: Zagreb/Croatia
Member No.: 27,735
myCENTs:85.95
I need a script that does this:
Lets say I have form with options...you surely know what that is...
CODE
<form name="form2" method="post" action="race.php?action=race">
<table border="1"><td>Who do you wanna race?</td></table>
    <select size=5 name="bike">
    <option value="Derbi Senda 50">Derbi Senda 50</option>
    <option value="Honda NS 50 R">Honda NS 50 R</option>
    <option value="Suzuki ZR 50">Suzuki ZR 50</option>
    <option value="Yamaha DT 50 MX">Yamaha DT 50 MX</option>
    <option value="Aprilia RS 50">Aprilia RS 50</option>
    </select>-<a href="java script:launchClasses()">?</a>
    <input type=submit value=Register>  
</td>
</tr>
</form>

When i put my mouse over one of them i want a picture of bike on which your mouse is on to pop up...
I hope you understand what i mean...i can't rephrase it to be more meaningful...i tried wink.gif
Go to the top of the page
 
+Quote Post
Orannis
post Feb 20 2008, 12:24 AM
Post #2


Newbie [ Level 1 ]
Group Icon

Group: Members
Posts: 8
Joined: 19-February 08
Member No.: 28,542
You mean something like this?

link

There is a whole pile of scripts for this here depending on what language you want to use.

Hope this helps you Eggie,

~ORannis
Go to the top of the page
 
+Quote Post
Eggie
post Feb 20 2008, 12:34 AM
Post #3


Premium Member
Group Icon

Group: [HOSTED]
Posts: 258
Joined: 19-January 08
From: Zagreb/Croatia
Member No.: 27,735
myCENTs:85.95
QUOTE(Orannis @ Feb 20 2008, 01:24 AM) [snapback]119200[/snapback]
You mean something like this?

link

There is a whole pile of scripts for this here depending on what language you want to use.

Hope this helps you Eggie,

~ORannis

i want from it to be more like this ajax
but there should be picture inside
Go to the top of the page
 
+Quote Post
TavoxPeru
post Feb 20 2008, 12:42 AM
Post #4


Super Member
Group Icon

Group: [HOSTED]
Posts: 876
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
myCENTs:13.21
QUOTE(Eggie @ Feb 19 2008, 06:40 PM) [snapback]119196[/snapback]
I need a script that does this:
Lets say I have form with options...you surely know what that is...
CODE
<form name="form2" method="post" action="race.php?action=race">
<table border="1"><td>Who do you wanna race?</td></table>
    <select size=5 name="bike">
    <option value="Derbi Senda 50">Derbi Senda 50</option>
    <option value="Honda NS 50 R">Honda NS 50 R</option>
    <option value="Suzuki ZR 50">Suzuki ZR 50</option>
    <option value="Yamaha DT 50 MX">Yamaha DT 50 MX</option>
    <option value="Aprilia RS 50">Aprilia RS 50</option>
    </select>-<a href="java script:launchClasses()">?</a>
    <input type=submit value=Register>  
</td>
</tr>
</form>

When i put my mouse over one of them i want a picture of bike on which your mouse is on to pop up...
I hope you understand what i mean...i can't rephrase it to be more meaningful...i tried wink.gif

Well, i think that it is not possible to do that with simple HTML and Javascript because you can't attach an event handler to the OPTION element, instead you can attach an event handler to the Focus, Blur and Change events of the SELECT element. Right now i'm testing a simple code to work with the Change event, so, give some time to complete it.

Best regards,
Go to the top of the page
 
+Quote Post
Eggie
post Feb 20 2008, 12:47 AM
Post #5


Premium Member
Group Icon

Group: [HOSTED]
Posts: 258
Joined: 19-January 08
From: Zagreb/Croatia
Member No.: 27,735
myCENTs:85.95
did i hear wrong or are you doing something to help me wink.gif
and btw i didn't understand a thing u said except that what i said
Go to the top of the page
 
+Quote Post
TavoxPeru
post Feb 20 2008, 02:21 AM
Post #6


Super Member
Group Icon

Group: [HOSTED]
Posts: 876
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
myCENTs:13.21
QUOTE(Eggie @ Feb 19 2008, 07:47 PM) [snapback]119204[/snapback]
did i hear wrong or are you doing something to help me wink.gif
and btw i didn't understand a thing u said except that what i said

No, you don't hear wrong, i'm doing a javascript to help you, and what you don't understand???

This is the code i make that works, it is very simple and it is open to a lot of modifications:
CODE
<html>
<head>
<title>Image Pop Up On Option Change </title>
&lt;script type="text/javascript">
    function showpic(o) {
        o = parseInt(o);
        switch (o)
        {
        case 1:
            imgName='del.gif';break;
        case 2:
            imgName='doc2.gif';break;
        case 3:
            imgName='docempty.gif';break;
        case 4:
            imgName='docurl.gif';break;
        case 5:
            imgName='new.gif';break;
        }
        var DivImage = document.getElementById('DivImg');
        var DisplayImg = document.getElementById('IdImg');
        DisplayImg.src=imgName;
        DivImage.style.visibility="visible";
    }
</script>
</head>
<body>
<form name="form2" method="post" action="race.php?action=race">
<table border="1"><td>Who do you wanna race?</td></table>
    <select size=5 name="bike" onchange="showpic(this.options[this.selectedIndex].value)">
    <option value="1" >Derbi Senda 50</option>
    <option value="2">Honda NS 50 R</option>
    <option value="3" >Suzuki ZR 50</option>
    <option value="4">Yamaha DT 50 MX</option>
    <option value="5">Aprilia RS 50</option>
    </select>-<a href="java script:launchClasses()">?</a>
    <input type=submit value=Register>  
    <div id="DivImg" style="position:relative;top:-50px;left:150px;z-index:20;width:25px;height:25px;visibility:hidden;text-align:center;"><img id="IdImg"></div>
</td>
</tr>
</form>
</body>
</html>

Take in mind that you must change all the images -names and paths- correctly to work at your website, if you want you can view it on action at Image Pop-up On Option Change.

Best regards,
Go to the top of the page
 
+Quote Post
jlhaslip
post Feb 20 2008, 07:44 AM
Post #7


Advanced Member
Group Icon

Group: Members
Posts: 197
Joined: 15-November 05
From: Inland from the Left Coast of Canada
Member No.: 9,627
myCENTs:44.50
Nice work. Very cool effect.

Can it be changed to an onhover event instead of onchange?
Go to the top of the page
 
+Quote Post
Eggie
post Feb 20 2008, 08:38 PM
Post #8


Premium Member
Group Icon

Group: [HOSTED]
Posts: 258
Joined: 19-January 08
From: Zagreb/Croatia
Member No.: 27,735
myCENTs:85.95
ok...i will try that code when i get home...i'm at my girlfriends house at this moment...i hope it works smile.gif

EDIT: thanx man...very nice...i'm impressed...wow...now i got that...now i go for other thing on my to-do list

This post has been edited by Eggie: Feb 20 2008, 09:32 PM
Go to the top of the page
 
+Quote Post
mastercomputers
post Feb 20 2008, 11:41 PM
Post #9


Making IT Happen
Group Icon

Group: Members
Posts: 678
Joined: 1-September 04
From: Auckland, New Zealand
Member No.: 27
myCENTs:69.15
Why can't you attach an event to an option element? There is the onmouseover event which will do what you want, I could even write it up but I don't have time so if anyone can show this method, they should.

Cheers,


MC

P.S. Just rethinking, why not just a CSS hover effect and eliminate Javascript, haven't actually thought too much about it yet, just popped into my head as I was leaving this thread.
Go to the top of the page
 
+Quote Post
TavoxPeru
post Feb 21 2008, 01:12 AM
Post #10


Super Member
Group Icon

Group: [HOSTED]
Posts: 876
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
myCENTs:13.21
jlhaslip
Yes and No, yes if you use it with another element that supports the onmouseover event like the A or P tags, and no if the element do not support it, like in this case with the SELECT. For example the following same function can be used with the A tag and with the P element like:

CODE
<a href="#" onmouseover="showpic(1)">Attached to the mouseover event</a>
<p onmouseover="showpic(2)">Attached to the mouseover event of the P tag</p>

In real world is logic that this fuction must use a variable as its value.

Eggie
No problem, i'm happy that it helps you.

mastercomputers
Because the OPTION element do not support the mouseover event, the SELECT element supports it but as a whole, if you attach the same function to the SELECT it will work but also you will need more code to get the same effect, you will need to detect the exact position of the x,y coordinates of the mouse position when it is over any of the options, etc, in other words MORE COMPLICATED. It would be very interesting to code something like that, i will appreciate it a lot if you post your solution if you do it.
About the CSS hover effect, you are right, you can use it and it would work very nice even with the OPTION element but the problem is that it doesn't work with Internet Explorer.

BTW, I test my code with Internet Explorer 6, Firefox 2.0.0.12 and Opera 9.24 and i can say that with Firefox all the functionality works perfectly, Opera also but the CSS hover effect only works with the INPUT element not with the OPTION, and Internet Explorer as i say above do not support the CSS hover effect in any case, well this is not absolutely true, because IE supports it with the A element, but in this example i don't use it wink.gif.

So the new code is this:

CODE
<html>
<head>
<title>Image Pop Up On Option Change </title>
&lt;script type="text/javascript">
    function showpic(o) {
        o = parseInt(o);
        switch (o)
        {
        case 1:
            imgName='del.gif';break;
        case 2:
            imgName='doc2.gif';break;
        case 3:
            imgName='docempty.gif';break;
        case 4:
            imgName='docurl.gif';break;
        case 5:
            imgName='new.gif';break;
        }
        var DivImage = document.getElementById('DivImg');
        var DisplayImg = document.getElementById('IdImg');
        DisplayImg.src=imgName;
        DivImage.style.visibility="visible";
    }
</script>
<style type="text/css">
form#form1 input {border:1px solid #414d59; padding-left:0.5em; margin-bottom:0.6em; width:230px; background:#f2f2f2;}
form#form1 input:hover{ background:#b80b38; border:1px solid #fff; color:#fff;}
form#form1 input:focus{background:#fff; border:1px solid #b80b38; color:#b80b38;}

form#form1 option {background:#f2f2f2;}
form#form1 option:hover  { background:#b80b38;color:#fff;}
form#form1 option:focus  {background:#fff; color:#b80b38;}
</style>
</head>
<body>
<form name="form2" method="post" action="">
<table border="1"><td>Who do you wanna race?</td></table>
    <select size=5 name="bike" onchange="showpic(this.options[this.selectedIndex].value)" >
    <option value="1" >Derbi Senda 50</option>
    <option value="2">Honda NS 50 R</option>
    <option value="3" >Suzuki ZR 50</option>
    <option value="4">Yamaha DT 50 MX</option>
    <option value="5">Aprilia RS 50</option>
    </select>-<a href="java script:launchClasses()">?</a>
    <input type=submit value=Register>  
    <div id="DivImg" style="position:relative;top:-50px;left:150px;z-index:20;width:25px;height:25px;visibility:hidden;text-align:center;"><img  id="IdImg"></div>
<!-- code addition - here works the option onmouseover event but only with Firefox -->
<select size=5 name="biketwo" >
    <option value="1" onmouseover="showpic(1);">Derbi Senda 50</option>
    <option value="2" onmouseover="showpic(2);">Honda NS 50 R</option>
    <option value="3" onmouseover="showpic(3);">Suzuki ZR 50</option>
    <option value="4" onmouseover="showpic(4);">Yamaha DT 50 MX</option>
    <option value="5" onmouseover="showpic(5);">Aprilia RS 50</option>
    </select>
<!-- code addition  -->
</form>
<a href="#" onmouseover="showpic(1)">Attached to the mouseover event of the A tag</a><br />
<p onmouseover="showpic(2)">Attached to the mouseover event of the P tag</p>
<form id="form1">
<input type="text" value="a value">
<select size=5 name="bike" >
    <option value="1" >Derbi Senda 50</option>
    <option value="2">Honda NS 50 R</option>
    <option value="3" >Suzuki ZR 50</option>
    <option value="4">Yamaha DT 50 MX</option>
    <option value="5">Aprilia RS 50</option>
    <option value="6">Aprilia RS 250</option>
    <option value="7">Aprilia RS 150</option>
    </select>
</form>
</body>
</html>

and can be viewed in action at Image Pop-up On Option Change Version 2

Best regards,

EDIT 1: Code addition that demostrates that is possibly to attach a function to the onmouseover event handler of the OPTION element but only works with Firefox.

EDIT 2: Check at Image Pop-up On Option Change Version 3 the last version of this code, especially the last SELECT, but as usual it only works with Firefox.

This post has been edited by TavoxPeru: Feb 21 2008, 06:16 AM
Go to the top of the page
 
+Quote Post
 

3 Pages V   1 2 3 >
Reply to this topicNew Topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   10 mastercomputers 366 19th February 2010 - 07:42 AM
Last post by: Quatrux
No New Posts   7 Eggie 163 15th February 2010 - 10:34 PM
Last post by: Nelson Blogs
No New Posts   0 8ennett 71 30th January 2010 - 11:10 PM
Last post by: 8ennett
No New Posts   6 shiv 4,412 14th January 2010 - 02:47 PM
Last post by: iG-Johnathan
No New Posts   15 sendto 15,316 26th December 2009 - 07:16 AM
Last post by: iG-
No new   21 soleimanian 9,751 18th December 2009 - 03:16 PM
Last post by: iG-Avinash an Assassin
No new   31 rmdort 14,332 9th December 2009 - 05:51 AM
Last post by: iG-ash
No new   23 TavoxPeru 13,134 6th December 2009 - 01:38 PM
Last post by: iG-Alex Finney
No New Posts   3 Creon 467 24th November 2009 - 12:33 AM
Last post by: HannahI
No New Posts   12 avalon 4,861 23rd October 2009 - 10:15 AM
Last post by: iG-kkk
No New Posts 2 TavoxPeru 905 13th July 2009 - 08:25 AM
Last post by: iG-duke87
No New Posts   3 soleimanian 7,728 13th May 2009 - 11:40 AM
Last post by: iG-Gudmund
No New Posts   3 (G)Debi Hoobler 757 5th May 2009 - 11:08 PM
Last post by: bobbybeeelan
No New Posts   6 anzoone 7,304 27th April 2009 - 11:13 AM
Last post by: Atomic0
No new   27 iciclez 5,021 16th January 2009 - 10:39 AM
Last post by: jackras

© 2010  AstaHost: Free Web Hosting & Technical Discussion, Free Web Hosting. a member of xisto. Powered by Invision Board. Skin: IPB Forum Skins

Web Hosting Powered by ComputingHost.com.
HONESTY ROCKS! truth rules.
Creative Commons License