Jquery Mobile Styling Images

Question

I am trying to write a mobile application that has images instead of buttons as links.

How do I style this image link so that when it is pressed the image glows or appears darker or moves slightly or grows slightly bigger?

In my research on the internet I found the ui-btn class which has ui-btn-down-a, ui-btn-up-a and ui-btn-hover-a.

However in my case, this not a button, it's an image which is a link.

How can I apply the effects?

UPDATE:

A good place to obtain transformation is http://westciv.com/tools/transforms/index.html

<div data-role="page" data-theme="a">
    <div data-role="content" data-theme="a">
        <a ontouchstart="" href ="wwww.yahoo.com"; class="ui-link-test">
            <img class="icon" src="img/icon.png" alt="black-button.png">
        </a>
    </div>
</div>

Haradhania

you can try yourimageview.setAlpha(100); in onClick() of this image. The image will just fade away a little bit when clicked. — Yogesh Somani, Jul 23 '12 at 11:57
Info which may help here: http://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari — Billy Moat, Jul 23 '12 at 11:58

Ana · Accepted Answer · 2012-08-01T08:54:25.580

Glows: use box-shadow
Appears darker: change the background a bit or apply a mask (mask could be a pseudo-element over it);
Moves slightly: change margin or use a translate transform;
Grows slightly bigger: change width and height or use a scale transform;

For the second two, I'd recommend transforms. They are supported by Android and have the advantage that moving or scaling the link won't disturb (= move) the elements around it.

Demo (keep mouse button pressed to see effects)

Relevant CSS:

.glow:active { box-shadow: 0 0 15px #fe0; }
.darker:active { background: goldenrod; }
.move:active { margin-left: 50px; } /* moves elements at its right */
.move2:active { transform: translateX(15px); }
.bigger:active { width: 120px; height: 66px; } /* moves alements after it */
.bigger2:active { transform: scale(1.1); }

NOTE: For transforms you need to add the prefixed versions before the unprefixed version as no current version of any browser supports the unprefixed version (IE 10 and Firefox 16 have been announced to support transforms unprefixed):

.move:active {
    -webkit-transform: translateX(15px); /* the one you need for Android */

    /* if your app is ONLY for Android, you can leave the next three out */
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    -o-transform: translateX(15px);

    transform: translateX(15px); /* always write it last */
}

.bigger:active {
    -webkit-transform: scale(1.1); /* the one you need for Android */

    /* if your app is ONLY for Android, you can leave the next three out */
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);

    transform: scale(1.1); /* always write it last */
}

Same thing is valid if you want smooth transitions:

a.ui-link-test {
    -webkit-transition: .5s; /* the one you need for Android */

    /* if your app is ONLY for Android, you can leave the next three out */
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;

    transition: .5s; /* always write it last */
}

Hi Ana! Thanks for your answer which includes source code. I tried testing on my image link and it didn't work. I went on to inspect the source page of your code. It is not the same as what I have: a { -moz-transition: all 0.5s ease 0s; border: 1px solid salmon; border-radius: 15px 15px 15px 15px; } There is no img src="icon.png", just a border — Cassia, Jul 23 '12 at 14:00
Of course it's cannot be the same - could you show us your code? — Ana, Jul 23 '12 at 14:02
I pasted it in the question, the difference is the image button which does not exist in your source code

and this is a link to an image which somehow looks like mine:http://t0.gstatic.com/images?q=tbn:ANd9GcR2BzAiEkbpSZKRuSd3PgjBHc6GuMNVGoxz1WoECRC_PXJ7tkor — Cassia, Jul 23 '12 at 14:09
You choose an option (glow, darker, whichever,...). Let's say you choose glow. Then you add `.ui-link-test:active { box-shadow: 0 0 15px #fe0; }` in your code and it will work. You can then change `#fe0` with any colour you wish. You can increase or diminish the spread of the glow by increasing the `15px` value. You can shift the glow to the left by replacing the first `0` with any positive number of px. To the right by replacing it with any negative number of px. You can shift it down by replacing the second `0` by any positive number of px. Up by replacing it by any negative number of px. — Ana, Jul 23 '12 at 14:23
Thanks hey, the top 3 worked except for the last 3. Could you please paste a link to information on transform s and why would changing the with not work? — Cassia, Jul 23 '12 at 15:05
Ana is the best! The reason why I couldn't replicate your source http://dabblet.com/gist/3163300 was because I was referencing the image class and not the a href class. The last three were not working because I hadn't specified the original width and position so the processor didn't know what to transition from or what original width/height to increase from. You are such a patient and helpful person!!! Thank you. — Cassia, Jul 23 '12 at 15:37

Jquery Mobile Styling Images

1 Answers1