Codeit1978
asked on
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?
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?
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.classNam
<? echo "<img src=\"$image\" width=\"$img_w\" height=\"$img_h\" onmouseover=\"this.classNa
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.classNam
<? echo "<img src=\"$image\" width=\"$img_w\" height=\"$img_h\" onmouseover=\"this.classNa
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; }
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.
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
:-)
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
:-)
ASKER
Hey julianmatz,
Your suggestion looks the bes. One question about your code, where do I specifcy the roll over image?
Your suggestion looks the bes. One question about your code, where do I specifcy the roll over image?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
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.
Regards,
James