Nov 21, 2009
Pages: 1, 2, 3

Image Popup On Mouseover

 		free web hosting

Read Latest Entries..: (Post #23) by Eggie on Feb 28 2008, 04:49 PM.
well...thats what i always think...so i try to help people out..but i get so much help for nothing last few weeksi will give you 10mill if you want...after i make such money on my site )
Read the FIRST post of this Topic. - Express your Opinion! Contribute Knowledge :-).

Open Discussion & Free Web Hosting > Computers & Tech > Programming > Scripting > PHP

Image Popup On Mouseover

Eggie
Feb 19 2008, 11:40 PM
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

 

 

 


Comment/Reply (w/o sign-up)

Orannis
Feb 20 2008, 12:24 AM
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


Comment/Reply (w/o sign-up)

Eggie
Feb 20 2008, 12:34 AM
QUOTE(Orannis @ Feb 20 2008, 01:24 AM) *
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

Comment/Reply (w/o sign-up)

TavoxPeru
Feb 20 2008, 12:42 AM
QUOTE(Eggie @ Feb 19 2008, 06:40 PM) *
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,

 

 

 


Comment/Reply (w/o sign-up)

Eggie
Feb 20 2008, 12:47 AM
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

Comment/Reply (w/o sign-up)

TavoxPeru
Feb 20 2008, 02:21 AM
QUOTE(Eggie @ Feb 19 2008, 07:47 PM) *
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,

Comment/Reply (w/o sign-up)

jlhaslip
Feb 20 2008, 07:44 AM
Nice work. Very cool effect.

Can it be changed to an onhover event instead of onchange?

Comment/Reply (w/o sign-up)

Eggie
Feb 20 2008, 08:38 PM
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

Comment/Reply (w/o sign-up)

mastercomputers
Feb 20 2008, 11:41 PM
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.

Comment/Reply (w/o sign-up)

TavoxPeru
Feb 21 2008, 01:12 AM
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.

Comment/Reply (w/o sign-up)

Latest Entries

Eggie
Feb 28 2008, 04:49 PM
well...thats what i always think...so i try to help people out..but i get so much help for nothing last few weeks
i will give you 10mill if you want...after i make such money on my site smile.gif)

Comment/Reply (w/o sign-up)

TavoxPeru
Feb 26 2008, 10:39 PM
QUOTE(Eggie @ Feb 26 2008, 05:19 PM) *
wow man...thats it...thanx...i owe you one...i hope i can give you something in return,,,or not...
i don't have much scripting experience so i need a lot of help...

No problem dude, i'm very happy to help because i know that when i need help i will receive the same thing.

BTW, in return you can give me 1 million dollars biggrin.gif smile.gif cool.gif tongue.gif wink.gif

Best regards,

Comment/Reply (w/o sign-up)

Eggie
Feb 26 2008, 10:19 PM
wow man...thats it...thanx...i owe you one...i hope i can give you something in return,,,or not...
i don't have much scripting experience so i need a lot of help...

Comment/Reply (w/o sign-up)

TavoxPeru
Feb 26 2008, 09:47 AM
QUOTE(Eggie @ Feb 26 2008, 12:06 AM) *
that's it...thats what i needed...thnx smile.gif

No problem, and check the source code of my page because there is some commented code that is not show up, and of course, you must change it to your own needs.

This is the code:
CODE
<html>
<head>
<title>Text Shows Up on Option Change Version 1</title>
&lt;script type="text/javascript">
    function showtext(o) {
        o = parseInt(o);
        switch (o)
        {
        case 1:
            TheText='50%';
            break;
        case 2:
            TheText='40%';
            break;
        case 3:
            TheText='33%';
            break;
        case 4:
            TheText='20%';
            break;
        case 5:
            TheText='10%';
            break;
        }
        var DivText = document.getElementById('Text');
        DivText.innerHTML = 'Your chance to win is '+TheText;
        DivText.style.visibility="visible";
    }
</script>
<style type="text/css">
body {
    font: normal 100.1% tahoma, arial, verdana, sans-serif;
}

#Text {
    position:relative;
    top:-65px;
    left:150px;
    z-index:20;
    width:250px;
    line-height:2em;
    visibility:hidden;
    text-align:center;
    background:#f2f2f2;
    font-weight: bold;
    font-size:0.9em;
    color:#b80b38;
}
</style>
</head>
<body>
<form name="form0" method="post" action="">
<table border="1"><tr><td>Who do you wanna race?</td></tr></table>
    <select size=5 name="bike1" onchange="showtext(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="Text"></div>
</form>
</body>
</html>

BTW, i test my code with Internet Explorer 6, Firefox 2.0.0.12 and Opera 9.26 and works perfect.

Best regards,

Comment/Reply (w/o sign-up)

Eggie
Feb 26 2008, 05:06 AM
QUOTE(TavoxPeru @ Feb 26 2008, 03:47 AM) *
Ok, check this Text Shows Up on Option Change Version 1 if it is what you want.

And i just register myself and play your game, as i see you are on the right way.

Best regards,

that's it...thats what i needed...thnx smile.gif

Comment/Reply (w/o sign-up)

Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.
Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Pages: 1, 2, 3
Similar Topics

Keywords : image, popup, mouseover

  1. Dynamic Php Image And Better Php Code Question
    (10)
  2. Dynamic Gd Image
    (2)
    I dont know if someone already made a topic like this, however it's not hard to understand if
    you can php, as many know we need to start a php script with CODE and end with CODE ?>
    to make a image you need a image type, I choos .png because its much cleaner then .jpg CODE
    header("Content-type: image/png"); for the background for the image we need this code CODE
    $image = imagecreatefrompng("http://www.imagefilez.com/out.php/i252132_Userbar.png"); if we wont
    a text in the image we need a font color, we get our font color from HEX values ....
  3. Need Help With Background Image...
    (12)
    I want to add background image to all sites on my website but some include "foot.php" and "head.php"
    and some "footer.php" and "header.php" but all include "config.php" but i dont know in which should
    i put it....any help??....
  4. Php :: Image Pixel Per Inch And Conversion
    Please Guide (1)
    Hi Masters I want soemone to let me know (maybe through a good tutorial and/or PHP Sample Code)
    the following : 1 - User will only allowed to upload images with minimum 120 and maximum 300 Pixel
    Per Inches 2 - User will only allowed to upload JPG images, however, if Gif / BMB / PNG / ETC is
    uploaded the script will convert that into jpg. 3 - If the Image's PPI is > 300 it will set
    to 300. Please guide . I know this can'y be done by GD it requires ImageMagick, Pleae help
    !!!!!!! ....
  5. Image Works With Php And Gd
    (3)
    Hi I have a 1 Big map. What i want is that the user will enter the latitude and longitude. the
    script will show that location in the image. I know how to convert Image X,Y Coordinates into
    Latitide and Longitude and vise versa. But there point is that the image is 1000x1000 wide but i
    want to show only the particular region of that latitude / longitude in 300x300 image. means that
    the PHP script will CROP wht Image (1000x1000) to 300x300. That way, the script will be shoing the
    part of an image, not the whole image. please help !!....
  6. Php :: Adding Image Over Image
    (5)
    Hi Masters & Champions. I want some help regarding putting and image over some location (x pixel ,
    y pixel) of an image. Here it is quite important to note that the mage which is Inserted over an
    image must be clickable. Like for example suppose i put T on an image DD then the T must be
    clickable. Please gudie as this is quite important for me . Thanks ....
  7. Script For Viewing A Random Image Needed
    (3)
    While browsing the web, I bumped into a script that I could really use, since it's different
    from everything that I saw. Most scripts that view a random image contain a code that chooses an
    image, and then puts the part into the page itself. However, on the www.greenplastic.com web
    site (dedicated to Radiohead), in the top left corner there is a random image module. If you look at
    the code, here's what is used: CODE Now, how can a PHP script be an image, and what
    kind of script that is? If you do visit that URL , you don't get a normal page, b....
  8. How Do I Resize An Image On The Fly?
    (8)
    I was wondering how I would go about resizing an image from a databse without saving it to a file.
    CODE include("settings.inc.php"); $get_a=$_GET ; $get_b=$_GET ; $get_width=$_GET ;
    $get_height=$_GET ; $query="SELECT * FROM $get_a WHERE id='$get_b'";
    $result=mysql_query($query); $image=mysql_result($result,0,"coverimg");
    $size=mysql_result($result,0,"imagesize"); $type=mysql_result($result,0,"imagetype");
    header("Content-length: $size"); header("Content-type: $type"); echo $image; ?> Obviously the
    image I want to resize is $image. The page name....
  9. Uploading Image Via Admin Menu?
    (2)
    There's never much action in here. Here's a question for all you php guys out there.
    Here's what I want. Let's say I create a simple administration menu for someone to
    Add/Edit/Delete a record/item from a database. Now in the add function, let's say I want to
    store a URL to a image. Rather than having to go in and FTP that image up on the server, how could
    a person create a 'Browse' button and find that image on your harddrive, then create a
    script to upload the image to the server? Just wondering how to do it, or if it could be done e....
  10. How Do I Make PHP Based Image Gallery Like This?
    Help Needed (20)
    is it possible to make a page in php, with a url like this:
    httq://www.mysite.com/viewer.php?http://www.mysite.com/galleries/01 (This is a sample link, read
    below) so that in what i change the last part the gallery will change with it? so that i just have
    to make one php-page and this page just shows all the imaes in the map thats in the url after the
    questionmark?? thanks,....
  11. Saving A Php Generated Image To The Server
    Help Needed Please (5)
    I'm trying to create a script that will generate an image and send it back to the browser while
    saving the same image to the server. I'm doing this because the image should be dynamically
    generated but because of the load that would place on a server if the image happened to be requested
    frequently, I've decided to build in a means to serve the static version of the image most of
    the time. What isn't included here is the function that will check the age of the file in cache
    directory and serve the static image if it is less than an hour old. This isn....
  12. Is It Possible To Create A String Image In Chinese
    (0)
    CODE Using imageloadfont $im = imagecreate(50, 20); $black = imagecolorallocate($im, 0, 0, 0);
    $white = imagecolorallocate($im, 255, 255, 255); imagefilledrectangle($im, 0, 0, 49, 19, $white);
    $font = imageloadfont("04b.gdf"); imagestring($im, $font, 0, 0, "Hello", $black); imagepng($im); ?>
      This is an example for illustrating how to create a image including a string with a specific
    font. In the codes, a font named "04b.gdf" is loaded and the string is created according to the
    font. What is the font named gdf? I mean what's the limitation or specificatio....
  13. Php: Write Random Text As Image
    Having problems, help needed! (3)
    I'm trying to create a script that writes text to an image. CODE header("Content-type:
    image/png"); $_phrases = array( "Test 1", "Test 2", "Test 3", "Test 4", "etc." );
    $_rand_phrase = $_phrases ; $_image = imagecreatefrompng("gmail.png"); $_user_width =
    imaagettfbbox(9,0,"tahoma.ttf",$_rand_phrase); $_x_value = (200-($user_width + 113)); $_color =
    imagecolorallocate($_image, 165, 164, 164); imagettftext($_image, 9, 0, $_x_value, 16, $_color,
    "tahoma.ttf", $_rand_phrase); imagepng($_image); imagedestroy($_image); I can't see what
    I'm doing w....
  14. Forum Signature-image With Php
    Use PHP to create an image in real-time (8)
    With interest I have read these Topics. What I want to do with PHP is the following:
    Signatue-image This is the Forum Signature of my cousin, who lives in Europe. The image is
    generated in real-time. (Refresh the page, and see for yourself) My cousin refuses to tell me how
    he did this. But I want to do the same thing, also with PHP. Any ideas? Greetings, John.
    Notice from microscopic^earthling: This is NOT a tutorial and in future you
    should be more careful about where you're posting your threads. Moved to Programming > Script....
  15. Random Image / Random Header
    S.O.S. (5)
    im building a website, and i need some help i got 3 frames, navigation, top and main, but i want
    the top banner to have a new tagline with every refresh, just like the header, it dont really matter
    what coding it is, as long as it's not to weird /tongue.gif" style="vertical-align:middle"
    emoid=":P" border="0" alt="tongue.gif" />....


      16. Looking for image, popup, mouseover

See Also,

*SIMILAR VIDEOS*
Searching Video's for image, popup, mouseover
advertisement



Image Popup On Mouseover

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com