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: 826
  • Last Modified:

PHP image rollover

Hi,

I have a website where I can can change 3 imges on the main site via an admin control panel I created.

Now my issue is, since the pictures path are being populated from a database.  I have a for loop which loops though the record set and populates a img src tag with the correct image.  i wanted to create roll over images for each pic with one static picture.

From my experience, i don't think i can place PHP variables in javascript.  

Would somone be so kind to enlighten me on how I could acomplish this?
0
Codeit1978
Asked:
Codeit1978
  • 3
  • 2
  • 2
  • +2
1 Solution
 
MrRioCommented:
You want to see 3 images, and when you rollover them you see the same static image?

Regards,
James
0
 
Julian MatzJoint ChairpersonCommented:
Hi Codeit1978,

Yes, you should be able to insert dynamic javascript. But I don't think you need to... Consider the following:

<style type="text/css">
img.rollover { filter: opacity(50); -moz-opacity: .5; }
</style>

then populate the following code:

<img src="/path/to/image.jpg" width="45" height="45" onmouseover="this.className='rollover';" onmouseout="this.className='';" />

<? echo "<img src=\"$image\" width=\"$img_w\" height=\"$img_h\" onmouseover=\"this.className='rollover';\" onmouseout=\"this.className='';\" />\n"; ?>
0
 
Julian MatzJoint ChairpersonCommented:

Sorry, I have a mistake there in the CSS... The filter property for IE should be:

img.rollover { filter: Alpha(opacity=50); -moz-opacity: .5; }
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.

 
ClickCentricCommented:
Opacity isn't fully supported yet, though.  I wouldn't recommend using that unless you know your clients won't use KHTML based browsers such as Konqueror or Safari.  I don't think Opera supports it either.  For a cross-browser solution, dynamically generated javascript is the better option.
0
 
fehaCommented:
Hi
Here is some information
you will not need to use JavaScript at all
http://www.cssplay.co.uk/menus/flickerfree_mk2.html

everything is with CSS

hope yhis helps
:-)
0
 
Codeit1978Author Commented:
Hey julianmatz,

Your suggestion looks the bes.  One question about your code, where do I specifcy the roll over image?
0
 
MrRioCommented:
<?php

$image_normal = "http://search.live.com/s/live/search_button_rest.gif";
$image_hover = "http://search.live.com/s/live/search_button_hover.gif";

echo "<img src=\"$image_normal\" onmouseover=\"this.src='$image_hover'\" onmouseout=\"this.src='$image_normal'\" />";

?>
0
 
Julian MatzJoint ChairpersonCommented:
Hi Codeit1978,

In my example, you do not need to specify a rollover image. What my example should do is show the specified image with 100% opacity, and when you move the mouse over it, the same image will show with 50% opacity. This would mean that you get a rollover effect but would not require 2 separate images. This method works instantly with any type of internet connection. If you need to have 2 separate images, MrRio's suggestion would also work.

The reason I suggested the first method was to minimize load times. It would not make a difference for a user with broadband, but a person with normal dialup will experience a delay of at least a second (depending on size) before the rollover image is loaded. Using the css method, a new image does not need to be loaded.

Opacity will work with all Mozilla based browsers, IE6, Firefox, Netscape.

Hope this helps.
0
 
ClickCentricCommented:
It's still unclear what exactly is wanted.  Do you want to be able to cause 3 images to roll over when you move the mouse over another image on the page?  Or do you want 3 images which all roll over to the same image when you move the mouse over each image?  In any event, dynamically generated javascript is still really the only cross-browser compatible way of doing this.  MrRio's method is probably the simplest and most straight-forward way of doing it.  If you want something that generates 'prettier' code, a better idea of what the desired end result is would be needed.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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