QImageButton mouse effects

thread: 7 messages  |  last: about 5 years ago  |  started: wednesday, february 6, 2008, 8:48 am pst


#1  |  Marcel (Germany) Germany
Wednesday, February 6, 2008, 8:48 AM PST

Hi,

how can I create effects for QImageButtons like at the top of this site with the buttons “Example site” or “Documentation”?
I tried it with QAjaxActions but thats not a good solution because it takes time and traffic and the effect which the user see is bad.
Hope someone can help me.

Thanks in advance Marcel.

#2  |  nick leung (Milpitas, CA) United States of America
Wednesday, February 6, 2008, 11:02 AM PST

Have you tried adding a QMouseOverEvent()?

#3  |  Marcel (Germany) Germany
Wednesday, February 6, 2008, 11:56 AM PST

Yeah, tried this. As I wrote I used QAjasxActions and triggered by a mouse over event.
But this solution is to slow and needs traffic.
I need something client site based.

#4  |  VexedPanda (Calgary, AB) Canada
Monday, February 11, 2008, 2:22 PM PST

You'll either have to do it via CSS (prefered), or via javascript.
You can tie into a hand-coded javascript function using a QJavascriptAction.

#5  |  Marcel (Germany) Germany
Tuesday, February 12, 2008, 3:02 AM PST

I tried CSS with following code:

CSS File:
.buttonNews:HOVER
   {
       background-image: url(“./images/button_news_over.png”); //Changes the image behind the image of the button
       src: url(“./images/button_news_over.png”); //Nothing
       image-src: url(“./images/button_news_over.png”); //Nothing
       image: url(“./images/button_news_over.png”); //Nothing
   }
Nothing I tried works.

And php file:
...
           $this->ButtonNews = new QImageButton($this->pnlCenter);
           $this->ButtonNews->ImageUrl = “./images/button_news.png”;
           $this->ButtonNews->CssClass = 'buttonNews';

Hope someone can help me, Marcel.

#6  |  will (Sydney, Australia) Australia
Tuesday, February 12, 2008, 5:03 PM PST

Hi Marcel, there are loads of ways to do this in css or js. You are likely to have to over come issues with ie's problems with png transparency and/or lack of support for hover on anything other than a tags. Which one you pick might depend on the exact effect you are after.

Since this is Qcodo forum though, what about the QImageRollover ?

   $this->marcel=new QImageRollover($this);
       $this->marcel->ImageStandard='images/left.jpg';
       $this->marcel->ImageHover='images/right.jpg';
       $this->marcel->LinkUrl='page.php';

and in the template:
   <?php $this->marcel->Render(); ?>

Ive just tried it now and it worked on Firefox and ie 6.

#7  |  Marcel (Germany) Germany
Wednesday, February 13, 2008, 10:06 AM PST

Hi, will

I used the stable version 0.3.3.2 and because of this I had not QImageRollover.
I updated to the newest developer version and now I'm using QImageRollover and it works as I want.

Thank you.

Marcel



Copyright © 2005 - 2013, Quasidea Development, LLC
This open-source framework for PHP is released under the terms of The MIT License.