Highlight image on tab change - javascript

I need your help. I need to highlight image just by dotted line on tab change means through tab when i will reach on that image it should be highlight.
I have code like:
<td><img src="../images/sign-in-btn.jpg" alt="" width="78" height="25" /></td>
it is a image which is solving the purpose of button. When use tab it is not highlighting this image. So i need help for this.
Waiting for early response.
Thanks in Advance:
Tanu

You can achieve this with jQuery, put this line when you reach the img tab
jQuery("#imgId").animate( { backgroundColor: '#65A6D1' }, 500).animate( { backgroundColor: 'white' }, 1000);

If you just want your image to behave like a standard button when focused, showing the same dotted border, you just need to set the .tabIndex property on it:
<td>
<a href="javascript:doSubmit();">
<img src="../images/sign-in-btn.jpg" tabindex="0" alt="" width="78" height="25" />
</a></td>

OK, I found another way. Instead of an img element, try using an input element which type is "image":<td>
<a href="javascript:doSubmit();">
<input type="image" src="../images/sign-in-btn.jpg" alt="" width="78" height="25" />
</a></td>
These input elements normally behave like buttons when clicked or focused.

Related

How to align imagen inside a button JQM + HTML5?

I have this issue of aligning an image with text inside a button. I've managed to do so, but this solution sets an image with text as part of the image instead. Then again if I had to change the text I would need to change the image text. Therefore it's somewhat useless.
As second solution, I've got an image inside the button besides a text which isn't aligned with my image. what could I do to make them fit?
`
Settings
You could create a new css class:
.my-button img
{
vertical-align:middle;
}
Next add this class to your a tag:
<a href="#" class="ui-btn ui-corner-all ui-shadow my-button">
<img alt="logo2" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" height="40" width="40"/>Settings
</a>
Your code modified here: http://jsfiddle.net/jtorrescr/GRzn5/2/

How to make whole table row clickable?

I have searched this site for a better solution on this but it seems that I can't find the right one.
I want to make my whole table row clickable in case of PC and also same thing should happen when user touches anywhere inside the row in case of tablet.
So far I have the following code and I would prefer a Html or JavaScript solution or anything along those lines.
<tr onclick="window.document.location='';">
<td><img src="/chemsolver/images/help.jpeg" alt="" width="36" height="36" id="Synthesis2" style="background-color: #996633" align="right" /></td>
<td> Help With Table </td>
</tr>
Set display: block on the anchor tag. And then set your height on the anchor.
http://jsfiddle.net/u2qLC/
Alternatively use an onclick event on the tr and have cursor: pointer set on the tr. Instead of using anchor tag.

HTML email template solution to javascript link in table TD?

This is my current code:
<td height="150" style="background: url(bg.jpg); cursor: pointer;" onClick="document.location.href='http://www.youtube.com';">
Now obviously with JavaScript this isn't likely to work in email clients (is it?). What is an HTML solution? Thanks in advance! I've tried wrapping link tags around but that doesn't seem to do the trick.
Why not just style a link to take up the width and height of the td:
<td height="150" style="background: url(bg.jpg);"></td>
Given the information you have posted (and your comment on #PAM's answer), I think this will solve your problem:
<td width="150" style="background-color:rgb(128,128,128); background-image:url('http://www.yoursite.com/yourpicture.gif'); cursor:pointer;">
<a href="http://www.youtube.com">
...Text...
</a>
</td>
I've added the background-color attribute to the td so that users have a fallback if their email client does not display background images. Of course, you should set this to a colour which is similar to the background image.
Can't you just type like that:
<td height="150"><img src="bg.jpg" /></td>

stop Chrome's click and hold / drag image default behavior

I've noticed that in Google Chrome, one can click and hold an image and while holding a semi-transparent copy of that image attaches itself with the cursor. Then one can drag that image to the desktop to save it.
I want to prevent and stop the semi-transparent version of the image attaching itself to the cursor on hold of certain images in my site.
How can I do this?
You can prevent this behavior by using the property
-webkit-user-drag: auto | element | none;
See the doc of -webkit-user-drag CSS-infos.net (I didn't find an MDN doc, if someone has a better reference)
How to use
Add a .nonDraggableImage class on your img tags, and add on your CSS :
.nonDraggableImage{
-webkit-user-drag: none;
}
I had to use a different solution to get it working:
<img src="http://placehold.it/150x150" draggable="false">
Thanks: https://stackoverflow.com/a/7439078/2443005
Another way is to create a transparent picture over the top of the picture you want to prevent viewing.
Please see:
http://www.dwuser.com/education/content/stop-the-thieves-strategies-to-protect-your-images/
check under "Tricking the downloaders"
I like to use - draggable
draggable="false"
<img draggable="false" src="image.jpg">
But you can try - ondragstart
ondragstart="return false;"
<img ondragstart="return false;" src="image.jpg">
or - pointer-events (some browser don't support & also have other problems)
style="pointer-events: none;"
<img src="image.jpg" style="pointer-events: none;">

Triggering a Flash button with an image overlay

I am using Google's Audio player to play an MP3 on a webpage. My issue is that I am overlaying an image on top of the the play/pause button. Yet when the image is clicked nothing happens. What am I doing wrong? Here is the code:
<div class="center" style="width: 400px; z-index:1; visibility:hidden;">
<embed wmode="transparent" width="400" height="27"
type="application/x-shockwave-flash" flashvars="audioUrl=/sourcefile.mp3"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf" quality="best"
></embed>
</div>
<img style="position:absolute; left:323px; top:630px; z-index:10000;"
src="/messages4u/2011/images/december/star-button.jpg" width="60" height="60"
alt="Play/Pause" />
I need to know how to trigger the flash button. I know it is possible with Javascript but I do not know how. Please provide examples.
UPDATE: Here is what I have tried at this point. Per Matt H recommendation I tried this code:
<input type="image" disabled style="position:absolute; left:323px; top:630px;
z-index:10000;" src="/messages4u/2011/images/december/star-button.jpg"
width="60" height="60" alt="Play/Pause" />
That did not work. One thing I noticed is if I have visibility:hidden; the flash player will not respoind to any clicks regardless of what is over it. With that said I attempted to overlay the image using <input> without the visibility:hidden; and it still did not work.
I need to get this fixed if at all possible. I am willing to use another flash player that is similar as long as it works correctly and will use an mp3 like above.
Looks like your image is catching the click that is supposed to go to the play button. You should add a handler for your image which returns true OR calls the player's play function.
Try this:
<input type="image" disabled style="position:absolute; left:323px; top:630px; z-index:10000;"
src="/messages4u/2011/images/december/star-button.jpg"
width="60" height="60" alt="Play/Pause" />

Categories

Resources