I have code:
<?php
function imagecode($url,$x,$y,$h='auto') {
?>
<div style="display:block;position:absolute;left:<?php echo $x; ?>;top:<?php echo $y; ?>;">
<img src="<?php echo $url; ?>" style="height:<?php echo $h; ?>;">
</div>
<?php
}
imagecode('/index_files/images/loga/same-off.png',110,-140,36);
?>
and I need to make that image change to another on mouseover, perhaps using $rollover_url for example. How to modify the code? Additionally image needs to be a link to website.
It's important to note that your PHP code doesn't exist in the browser, and the browser is where the mouseover effect takes place. Your PHP code exists only on the server, where it gets processed into code that will be shipped out to the browser.
In order to do a mouseover effect, you could take the traditional method of using JavaScript, and do something along the lines of the following:
var kitten = document.getElementById("kitten");
kitten.addEventListener("mouseover", function(){
this.src = "overImage.png";
}, false);
kitten.addEventListener("mouseout", function(){
this.src = "originalImage.png";
}, false);
If you named your images like 1.png, 2.png, ..., 13.png this might work assuming you will only ever have 13 images.
var image = document.getElementById("image");
var counter = 1;
image.addEventListener("mouseover", function(){
counter = counter +1;
this.src = counter + ".png";
}, false);
image.addEventListener("mouseout", function(){
this.src = counter + ".png";
}, false);
That is, assuming all the images are in the same directory as the webpage the javascript is on. It changes image on mouseover but nothing on mouseout.
You can chamge it as you wish.