I’m using CHtml::ajaxLink to generate an ajax link with an image called “x.png”. When the user’s mouse hovers over the image, I’d like the image to change to “x_hover.png”. I’ve tried various methods for making this happen, but haven’t found a clear-cut technique in the docs or forum. Here’s what I’ve got:
// Generate the image hyperlink
$baseUrl = Yii::app()->request->baseUrl;
$img = "<img class=\"hide\" src=\"{$baseUrl}/images/x.png\"/>";
$url = Yii::app()->createUrl('site/hide', $params);
echo CHtml::ajaxLink($img,
$url,
// ajax options
array(
'type' => 'GET',
'dataType' => 'json',
'success' => 'function(data) { alert("success!"); }',
),
// htmloptions
array(
'id' => 'hide',
)
);
// In my stylesheet I define a style called "hide_hover":
.hide_hover {
src: images/x_hover.png;
}
I just can’t figure out how to hook up the “hide_hover” style to the onmouseover event. I tried adding
Thanks for replying. Your solution would work fine for a regular link. But it’s important that this be an ajax link. When the user clicks it, the code handles some database logic.
So, the question is how to get a mouseover effect using an ajaxLink.
Thanks so much! The first way you prescribe is the one that works best. When I tried the second way, then, when the mouse got anywhere in the vicinity of the image, the mouseover effect occurred.
Here’s the whole solution for anyone in the same boat. Special care has to be taken with the quote marks when defining the onMouseOver and onMouseOut handlers:
This code will work fine. Anyway, many tutorial suggest that is better to use only one image, in order to avoid the delay at the hover moment for load the second image. You can create an image with the two status, normal and hovered, in the same image, and then change the background position. like that:
if your original image has an height of 32 pixel. No need of any javascript control.
Just remember that in css and jquery for refer to an object you have to use #ID or .class, you used .id, that’s why was not working for you. Also the hover needs :.