?
Solved

On the fly image OnMouseOver()

Posted on 2005-03-30
11
Medium Priority
?
388 Views
Last Modified: 2010-08-05
Hey experts,

I'm trying to make a rollover event that refreshes a image placeholder that can be placed anywhere on a page with an jpeg or gif image that is generated on the fly.  

----------------
|                  |
|    IMAGE     |
|                  |
----------------

/* When mouseover'ed, I want <image 1> displayed  */
<Rollover link 1>
/* When mouseover'ed, I want <image 2> displayed  */
<Rollover link 2>

So far I've written a php function that takes as an input a file location and saves it as a jpeg of a certain size in a file location on the server.  What's the best way to write this?

-Chris
0
Comment
Question by:Discomonkey
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
  • 2
11 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 13662817
<body>
<script>
function changeImage(inputSrc){
    document.getElementById('myImage').style.display='inline';
    document.getElementById('myImage').src=inputSrc;
}
</script>
<a href="#" onclick="changeImage('image1.gif');return false">Show image 1</a>
<a href="#" onclick="changeImage('image2.gif');return false">Show image 2</a>
<img id="myImage" style="display:none" src="image1.gif">
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13662847

<img src = "" id = "image1" src = "http://www.experts-exchange.com/images/pe/1088274.jpg">

<a href = "#" onmouseover = "document.getElementById('image1').src = 'http://www.experts-exchange.com/images/logoTopLeft.gif' " >Link1</a><br>
<a href = "#" onmouseover = "document.getElementById('image1').src = 'http://www.experts-exchange.com/images/logoR.gif' " >Link2</a>
0
 
LVL 1

Author Comment

by:Discomonkey
ID: 13662856
ok, how do I call my php function that genreates the image I want to swap in?  I don't want static image definitions, I want to be able to give any image as an argument to my php function and have it as my mouseover
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 25

Assisted Solution

by:archrajan
archrajan earned 140 total points
ID: 13662878
document.getElementById('image1').src = 'http://www.experts-exchange.com/images/logoTopLeft.gif' "
instead of this line have

document.getElementById('image1').src = '<?your php function ?>' "
0
 
LVL 1

Author Comment

by:Discomonkey
ID: 13662899
just ready my last comment, it doesn't make as much sense as I thought it did, so let me clarify just in case.

I want my events to happen like this:
1) Mouseover Action triggered
2) A Function called that generates a thumbnail image (I've written this part in php, but don't know how to trigger it with javascript)
3) Javascript changes the image src (Your comments have answered this part I believe)

If this isn't possible with php, is there another way?
0
 
LVL 1

Author Comment

by:Discomonkey
ID: 13662903
Ok let me try that
0
 
LVL 32

Accepted Solution

by:
Batalf earned 640 total points
ID: 13662921
No, you can't set the src to the php function. That won't work.

What you could do is to let the source of the image be a php file, and just output the image from there

Example:

<body>
<script>
function changeImage(inputSrc){
    document.getElementById('myImage').style.display='inline';
    document.getElementById('myImage').src=inputSrc;
}
</script>
<a href="#" onclick="changeImage('image.php?imageID=1');return false">Show image 1</a>
<a href="#" onclick="changeImage('image.php?imageID=2');return false">Show image 2</a>
<img id="myImage" style="display:none" src="image1.gif">

i.e. you set the source of the image to image.php. image.php generates the image and outputs it.

Batalf
0
 
LVL 1

Author Comment

by:Discomonkey
ID: 13662978
Hmmm, when I rollover the text link, the image disappers.  It seems that the php function executes, but doesn't draw the image fast enough?  Gonna try putting ordering the functions..
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13662986
if the output of ur php function is the image then the src of the function shud work..
0
 
LVL 1

Author Comment

by:Discomonkey
ID: 13662995
Ohhhhh that's a real good idea Batalf, let me try that
0
 
LVL 1

Author Comment

by:Discomonkey
ID: 13663111
Yep, works like a charm.  Thanks a ton!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question