AjaxLink : How to add an hover or onmouseover event handler to an image link

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

‘hoverClass’=>‘hide_hover’

to the htmloptions array, to no avail.

Ideas welcome!

TIA,

Emily

What about something like this:


<img src="none.png" width="100" height="100" onmouseover="$(this).attr('src', 'http://www.google.de/logos/classicplus.png');" alt="" />

I hope this helps ;)

1 Like

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.

One way:




// htmloptions

array(

  'id' => 'hide',

  'onmouseover'=>'functionName()'

)



Another way:




<script type="text/javascript">

$("#hide").mouserover(function(){

  //your code

});

</script>



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:


 

$baseUrl = Yii::app()->request->baseUrl; 

$imageId = "hide_img"; 

$normalImageSrc = "{$baseUrl}/img/x.png";

$hoverImageSrc = "{$baseUrl}/img/x_hover.png"; 

$img = "<img id=\"{$imageId}\" class=\"hide\" src=\"{$normalImageSrc}\"/>";

$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',

         'onMouseOver' => "document.{$imageId}.src = " . "'" . $hoverImageSrc . "';",   

         'onMouseOut'  => "document.{$imageId}.src = " . "'" . $normalImageSrc . "';",

         )                 

);  


// No need for a CSS style as in original post.




Thanks again and long live Yii!

Emily

I gave you the idea how it has to work. The answer of Davidhhuan is exactly the same as mine…

haha, no matter how about the results, we just share the experience, right? :P

I prefer to this kind of job with CSS. I use the property background + padding for leave the space for the image.

You can easily achive with this line of css:




#idbutton

{

    padding-left: 10px;

    height: 20px;

    display: inline-block;

    background-image: url('../img/x.png');

}


#idbutton:hover

{

    background-image: url('../img/y.png') ;

}




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:




#idbutton

{

    padding-left: 10px;

    height: 20px;

    display: inline-block;

    background-image: url('../img/x.png');

}


#idbutton:hover

{

    background-position: 0, -32px ;

}




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 :.

Hi I am using grid view and defining onmouseover event .following is my code

array(

        &quot;header&quot; =&gt; Yii::t('b.asset', 'Thumb Image'),


        'name' =&gt; 'thumbImage',


        'type'=&gt;'raw',


        'filter'=&gt;'',


         'htmlOptions'=&gt;array(


           'onMouseOver'=&gt;&quot;showtrail(&quot; . &quot;'&quot; . &#036;data-&gt;url . &quot;','title',400,500)&quot;,  


            'onMouseOut'=&gt;&quot;hidetrail()&quot;, 


             


         ),

‘value’ => ‘($data->mime_type==“image/jpeg” || $data->mime_type==“image/png”)?CHtml::image($data->url,"",array(“style”=>“width:50px;height:40px;”,“id”=>“changeEffect”)):""’,

),

My problem is I am not getting $data->url value in onMouseOver ‘onMouseOver’=>“showtrail(” . “’” . $data->url . “’,‘title’,400,500)”,

and i am getting $data->url value in CHtml.

Please help me How i can use.

I have solved by jquery.

define a class attr

‘value’ => ‘($data->mime_type==“image/jpeg” || $data->mime_type==“image/png”)?CHtml::image($data->url,"",array(“style”=>“width:50px;height:40px;”,“class”=>“showLargeImage”)):""’,

<script>

&#036;(&quot;.showLargeImage&quot;).mouseover(function(){        


    var srcVal=&#036;(this).attr(&quot;src&quot;);       


    showtrail(srcVal,'',400,500);


});





&#036;(&quot;.showLargeImage&quot;).mouseout(function(){


    hidetrail();


}) ;

</script>

This works for me.

your url field type is mediumblob or not ?

I followed your script but the image didn’t show up in CGridview