I want the simplest script to change an image/button from one image to another image of the same size. Basically, the same button with different colors.
The button is on a website which will be only accessed by mobile devices. It will link to another website, but I already know how to do that. I've tried using the mouse event scripting I'm familiar with, but I still cannot get this to work. I want it to be as basic as possible.
Here's the script I'm currently using:
<img onclick="this.src='emergency-down.png'" onmouseout="this.src='emergency-up.png'" src="emergency-up.png" />
As long as you just want this to happen once, change <a href=""> to <a href="#">.
Related
Okay now i'm having a tough situation. I'm using a free html template. So far i have been able to do the following:
When a user clicks the thumbnail. The video will play where it should.
All i had to do with add the direct raw video file to the href of that image.
<a class="thumbnail" href="VIDEO_LINK.MP4"><img src="http://i.imgur.com/KWyIHw8.jpg" /></a>
Then i came accross a problem where the raw link would display on the bottom left of the browser.
I fixed it by adding an onclick event to form a function.
<a class="thumbnail" href="#" onclick="video();"><img src="http://i.imgur.com/KWyIHw8.jpg"/></a>
The function is:
Function video() {window.location.href = 'VIDEO_LINK_HERE.MP4'}
Well it turns out that now when i click the image it navigates the whole page to that link.
I need to know how i can make it play without navigating out of my website like in the first picture and most importantly not showing the raw video link.
Try using the jquery load func, to load the image in a specific div
$("#div1").load("http://i.imgur.com/KWyIHw8.jpg")
I'm working on a website, and I want to add gallery to it. But I have a problem - the gallery must be accessible to blind etc, and I have no idea how to do it.
Usually, in those kinds of galleries, I would do the html like this:
<ul>
<li data-src="path/to/image/1.jpg"></li>
<li data-src="path/to/image/2.jpg"></li>
<li data-src="path/to/image/3.jpg"></li>
<li data-src="path/to/image/4.jpg"></li>
<li data-src="path/to/image/5.jpg"></li>
<li data-src="path/to/image/etc.jpg"></li>
</ul>
and using css and jquery I would use the data-src and add it as a background to the li (because not all photos are squers, so I'll use background-size: cover;). Then, when user will click on the li, a popup will appear with the full size image.
There are some problems with that. For example, it must be clickable using tab in the keyboard. I can add a to the li, but is it ok not having href? And what the machine will "think" when it'll see empty ul list? Another problem is the popup. The html of the popup and it's img tag located at the bottom of the page, so the machine won't be able to see it immediately after click. Another problem is the alt. There won't be description to photos (because they aren't uploaded by me), so I'll leave the alt empty?
Thanks!
Principles:
Images that convey information must have a text description. Best practice is to always use am <img> for an informational image, however, you could also use a title attribute on the anchor around the image.
Everything must be keyboard operable. Anchors without an href will not be tab focusable, add href="#" to fix that problem.
Blind people are not the only keyboard users. Make sure that you can control the gallery with the keyboard only.
Manage the focus when dynamic content appears and disappears. Make sure that the focus goes onto the full size popup and that the "close" control is keyboard operable. When closed, focus should go back to the anchor that opened the image.
Controls should have the correct role. Links are used to go to different pages. Buttons are used to control things on the same page. Your "anchor" around the image is acting like a button so add role="button" to the anchor.
You will have to give the image uploaders a way to add the alt text for the images. Facebook is not a good example of accessibility - it is a bad example. Look at EasyChirp for a good example of how to do alts on images that are uploaded.
This is the HTML for the main logo in the corner of the IMDb website.
<a onclick="(new Image()).src='/rg/home/navbar/images/b.gif?link=%2F%3Fref_%3Dnv_home';" href="/?ref_=nv_home" id="home_img" class="navbarSprite home" title="Home"></a>
I don't understand the onclick event. What is that doing? It doesn't make sense to me to see image instantiation as an onclick event for an image.
It's a tracking click. Although it is creating an image, the sole purpose is to make an easy external request to the tracking URL to log the click (the image is never displayed on the page). b.gif is not really a GIF file, but a server-side tracking script.
Our sales people accepted flash banners without a click tag and then scream in anger when our ads server (openx) didn't count correctly the clicks.
So, I'm looking if exists some way of "simulate" a click tag, I don't know exactly how, maybe with some JavaScript.
You could put a blank <span> or <div> element in front of the embedded flash, and then use a JavaScript event listener to open the desired URL.
Just pass the link as a variable to your Flash movie in the embed code.
I designed my own gallery which consists of a bunch of thumbnails on load, and when they are clicked on the image pops out to a bigger picture so the user can see it more clearly. On these pop out windows I have the ability to specify a URL which the user will be sent to if he/she clicks on the popped out image.
Because this whole gallery is being loaded by JavaScript, search engines will not be able to see the links that are attached to the pop out boxes. I thought about putting a text link also below the gallery thumbnails, but I think that would just make the gallery look sloppy. I have also thought about creating a hidden link, but I believe that will be ignored by the search engines and its frowned upon.
Anyone have any idea on how I can get this link to look good, and be visible by search engines?
Googlebot is able to construct much of the page and can access the onClick event contained in most tags. For now, if the onClick event calls a function that then constructs the URL, Googlebot can only interpret it if the function is part of the page (rather than in an external script).
Some examples of code that Googlebot can now execute include:
<div onclick="document.location.href='http://foo.com/'">
<tr onclick="myfunction('index.html')">new page
open new window
Put the link right around your thumbnail:
<img src="thumb.jpg" />
Bind your expand function to the link and cancel the default behavior in your javascript:
$("a.thumb").click(function(e)
{
// show the larger version
e.preventDefault();
});
You could make your thumbnails link to the bigger picture and use JavaScript to ignore that actual link and open the popup with your current functionality. The thumbnails will get indexed and the links will get spider-ed as well.
use jquery event.preventDefault(); This will prevent the link action from happening, and you can do what you want to do with javascript. This is a good way of allowing sites to work for users without javascript enabled, but adding nice features for those that do. This way, the search engines will see the link and follow it, and users will still get the rich javascript experience you are creating.
<a href="link-to-page1.html" class="thumb-link">
<img src="thumbnail1.png" alt="thumb 1" />
</a>
<a href="link-to-page2.html" class="thumb-link">
<img src="thumbnail2.png" alt="thumb 2" />
</a>
<a href="link-to-page3.html" class="thumb-link">
<img src="thumbnail3.png" alt="thumb 3" />
</a>
then in your javascript:
$(document).ready(function(){
$(".thumb-link").click(function(event){
event.preventDefault(); // cancel the hyperlink default action
// do your javascript here
});
});