Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 395
  • Last Modified:

On the fly image OnMouseOver()

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
Discomonkey
Asked:
Discomonkey
  • 6
  • 3
  • 2
2 Solutions
 
BatalfCommented:
<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
 
archrajanCommented:

<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
 
DiscomonkeyAuthor Commented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
archrajanCommented:
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
 
DiscomonkeyAuthor Commented:
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
 
DiscomonkeyAuthor Commented:
Ok let me try that
0
 
BatalfCommented:
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
 
DiscomonkeyAuthor Commented:
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
 
archrajanCommented:
if the output of ur php function is the image then the src of the function shud work..
0
 
DiscomonkeyAuthor Commented:
Ohhhhh that's a real good idea Batalf, let me try that
0
 
DiscomonkeyAuthor Commented:
Yep, works like a charm.  Thanks a ton!
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 6
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now