I want an image to get displayed on a page when the user clicks on a certain link that looks like #foo. Example
<a href="#dog">Dog</a>
<a href="#cat">Cat</a>
If the url contains #dog it will display a picture of a dog. if the url contains #cat it will display a picture of a cat. How can this be achieved. Then have the images be displayed in the image tag.
<img id="something" />
Edit: I'm thinking of maybe having all images hidden until link id clicked. Then somewho get the url and determine which image to display. The most important part is to do it from identifying the URL
A sudo code idea of what I'm trying to achieve.
if url = #dog then
display in idelement dog.jpg
else if url = #cat then
display in idelement cat.jpg
else display defualt.jpg
<img id="idelement" />
i made an example here but it miss how you would like to display the image : http://jsfiddle.net/VgkUL/3/
<a href="#foo" >#foo....</a>
<a href="#cat" >#cat....</a>
$('a').each( function() {
$(this).click( function(e) {
var imgUrl = $(this).attr("href"); // url of the image, you can save it somewhere else into the a Tag
alert(imgUrl);
// display here the image where you want
e.preventDefault();
return false;
})
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.