I basically have this link, where when i click it, i want an image to show over it. Using javascript how can i do this?
<a> click me </a>
css:
a.clicked
{
/*what goes here?*/
}
-
You can't add an image over something using CSS.McKayla– McKayla2011-05-25 03:48:13 +00:00Commented May 25, 2011 at 3:48
-
gotcha. but how can i add an element using javascript?dave– dave2011-05-25 03:49:32 +00:00Commented May 25, 2011 at 3:49
-
Oh. Ok. Yeah. You can do that. But adding a 'clicked' class to the link won't do anything.McKayla– McKayla2011-05-25 03:55:11 +00:00Commented May 25, 2011 at 3:55
Add a comment
|
4 Answers
Adding a new image element is pretty easy:
// Append an image with source src to element
function appendImage(element, src, alt) {
// DOM 0 method
var image = new Image();
// DOM 1+ - use this or above method
// var image = document.createElement('img');
// Set path and alt properties
image.src = src;
image.alt = alt;
// Add it to the DOM
element.appendChild(image);
// If all went well, return false so navigation can
// be cancelled based on function outcome
return false;
}
so in an A element:
<a onclick="appendImage(this, 'foo.jpg', 'Picture of foo');">Add an image</a>
If the A is a link and you wish to cancel navigation, return whatever the function returns. If the function doesn't return false, the link will be followed and should provide equivalent functionality:
<a href="link_to_picture or useful page" onclick="
return appendImage(this, 'foo.jpg', 'Picture of foo');
">Add an image</a>
Comments
You should use like this. There are several other good methods, this is just for simplicity and understanding purpose
<body>
<a onClick='ChangeImage(this);return false'> Click Me <a>
</body>
<script>
function ChangeImage(obj)
{
obj.innerHTML = "<img src='imangename.jpg'>";
}
</script>
First, you'll probably want to give the link an ID.
<a id="click-me">Click me!</a>
Then for the JavaScript..
document.getElementById('click-me').addEventListener('click', function () {
var image = new Image();
image.src = "your-picture.jpeg/png/whatever";
this.appendChild(image);
});
