Onclick Doesn't Work In Chtml::image

Yii 1.1 General Discussion
1

Hi Community,

Inside a table’s cell I’ve a link with an image as you can see in the code below.

It works fine except for the onclick event, doesn’t show the image.

What am I doing wrong?

Thanks in advance

[b]<td>

&lt;?php


     &#036;baseUrl = Yii::app()-&gt;request-&gt;baseUrl; 


     &#036;imageId = &quot;resultados&quot;; 


     &#036;normalImageSrc = &quot;{&#036;baseUrl}/images/grafico_resultados.jpg&quot;;


     &#036;hoverImageSrc = &quot;{&#036;baseUrl}/images/grafico_resultados_hover.jpg&quot;;


     &#036;selectImageSrc = &quot;{&#036;baseUrl}/images/loading51.gif&quot;; 


     echo CHtml::link(


          CHtml::image(YII::app()-&gt;baseUrl.'/images/grafico_resultados.jpg',


                'Resultados',


                 array(


                    'id'=&gt;'resultados',


                    'onMouseOver' =&gt; &quot;document.{&#036;imageId}.src = &quot; . &quot;'&quot; . &#036;hoverImageSrc . &quot;';&quot;,   


                    'onMouseOut'  =&gt; &quot;document.{&#036;imageId}.src = &quot; . &quot;'&quot; . &#036;normalImageSrc . &quot;';&quot;,


                    'onClick'     =&gt; &quot;document.{&#036;imageId}.src = &quot; . &quot;'&quot; . &#036;selectImageSrc . &quot;';&quot;,


                    ) 


                ),


          array('clientes')                      


          );


?&gt;

</td>[/b]

2

So you wrote 18 lines of php instead of <a href="…"><img src="…" onclick="…" /></a>.

Nice.

First of all, it can be browser optimization (clicking on the link can stop browser from doing extra jobs, because he is about to leave this page anyway). You should move your click handler to <a>:

<a href="…" onclick="…"><img src="…" /></a>.

Next, open js debug console and see if there are any errors.

Last, look at generated HTML code, maybe you’ll see the problem.

PS. Some tips:

  1. You can use one image for normal and hover states. Google for css sprites.

  2. You can use "this" inside handler functions. It points on element itself.

  3. You can use pseudo-class "hover" for doing most of the job for you.

3

Thanks Orey for your quick response, but now I’m confused. I’d read in the forum the use of the Ctml class instead of the html tag <a> or <img> directly in the view, that is the reason for the 18 lines. So what do you suggest?

If It’s better the use use of CHtml class I don’t know how to implement the CSS sprites, that is, the use of the CSS’s background-image property, if I’am using the CHtml::image. I need to link with an image not a word.

Thank you for tip #2, I’ll use it.

Do you have an example of tip #3, I don’t understand, do you have a simple code’s example?

Thank you

4

IMHO the only reason to use CHtml::link is its JS features (see clientOptions: submit, confirm etc)

Actually, this is Yii forum, not HTML :)

But just in case, here’s the quick proof of concept:


<style>

a.strange-link {

	width: 100px;

	height: 100px;

	display: block;

	border: 1px solid red;

	background: url(...here goes your sprite image url...);

	background-repeat: no-repeat;

}


a.strange-link:hover {

	border: 1px solid green;

	background-position: -100px 0px;

}

</style>


<a href="#" class="strange-link"></a>
5

Thanks, I know this a YII forum, but I was confused in the used of CHtml::link