Is there a way to create an imagemap on an image when the image is created in Javascript?
So image is created this way:
var img = new Image();
then set all properties.
But how do I now create an imagemap on this image?
Regards,
Tony
UPDATE
Here's my code to create image:
function createimg()
{
var img = new Image();
img.src='Image/URL';
img.alt='Next image';
img.id = 'span1';
img.style.zIndex = 10;
img.style.position = 'absolute';
img.style.display='none';
img.style.top = '130px';
img.style.padding='10px';
img.style.left='440px';
img.usemap='#trialmap';
img.className ='dynamicSpan';
document.body.appendChild(img);
return img;
}
This sits in inside tags. Now imagemap:
<map name="trialmap">
<area shape ="rect" coords ="0,0,500,500"
href ="http://www.google.com" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="100,100,10,10"
href ="http://www.twitter.com" target ="_blank" alt="Mercury" />
</map>
Now where do I put this, cause it has to be right beneath the image, per what I have read? I cannot put it inside a tag, cause that does not work.
First,
How do you create an image in Javascript?
But on to your question...
An image map is tied to the <img /> element, not the actual image itself. So even if you have a method for creating an image in javascript, how are you placing that image in the page?
If the image is being pushed to the server and therefore has a URL, you could then create an img element in the DOM, and then make your image map.
In fact, you could even have the image map before the image was ever created, since all that ties the map to the image is the attribute usemap which points to the name attribute of the map element.
Quick Edit
I think I understand now. The Image() method you are referring to is simply creating an img element, right?
So basically, you just need to add the attribute/property usemap and set it to the name of the <map> you want to use.
To use David's method, you would go with something like:
//This assumes the image will go in some div with the id of "image-box"
var imageBox = getElementById("image-box");
var myImage = createElement("img");
myImage.id = "myImage";
myImage.src = "myimage.png";
myImage.useMap = "#myImageMap";
imageBox.appendChild(myImage);
//Now you would need to have a map element with a name of myImageMap
var myMap = createElement("map");
myMap.name = "myImageMap";
imageBox.appendChild(myMap);
//Obviously you would want to then fill the map using the appendChild method with the area elements that make it useful...
http://www.w3.org/TR/html4/struct/objects.html#h-13.6 explains the HTML structure. You just need to build that structure directly in DOM instead of in HTML.
The Opera WSC has a good introduction to DOM in it.
Related
I was wondering if it was possible to change an image source on a page based on a url parameter? Perhaps using Javascript?
For example, if we have the default image with an ID?
The scenario would be, http://example.com/page-name/?image-id=specifiedimg
and this would load the image as what the source is set for "specifiedimg"
You can specify the image path in the url and then use URLSearchParams to get the image path and then set the image as source to the image element.
for example: http://example.com/page-name.html?image-id=assets/img/something.png
const searchParams = new URLSearchParams(location.search),
imagePath = searchParams.get('image-id'),
image = new Image() // you can use querySelector to target an existing image tag
image.src = imagePath;
I have an assignment where I need to make a photo appear when I click on another photo. I need to put each image in an array and call on it to appear when I click on the corresponding photo. When I click on another photo, I need to remove the existing photo and replace it with another one. I need to do it with Javascript and the DOM. I'm unsure how exactly I would do this. Here's my code so far:
var photoDiv = getElementById("photos");
document.getElementById("0").addEventListener("click", function () {
var img = createElement("img");
photoDiv.appendChild(img);
})
I know it's completely wrong but I don't know what to do to fix it :(
You have to add the image source of your image.
After this line:
var img = document.createElement("img");
img.src = 'pathto/yourimg.png_or_jpg'; // You need this.
Also, it's always a good practice to use document.getElementById() (or putting the parent) instead of just getElementById().
Instead of creating a new image you can also replace only the src of the image element, something like this:
// get the image
var imgElement = document.getElementById("myImage");
// add the listener
imgElement.addEventListener("click",
function () {
// update the src of the image
imgElement.src = "https://www.w3schools.com/html/img_girl.jpg";
});
and that's all, you should not create a new element and append it to the DOM element.
I have multiple SVGs on my page (they can be dynamically added using a plus or minus image as well). ie:
<img src="/svgs/mysvg.svg" id="svg1">
<img src="/svgs/mysvg.svg" id="svg2">
<img src="/svgs/mysvg.svg" id="svg3">
Inside mysvg.svg, there is a path element with the id #circle. When I am only display 1 svg on the page, I can use the following javascript to change the color of #circle:
$('#circle').css('fill', '#000000');
When I have multiple SVGs on a single page, how can I select which svg I want to change? ie:
var mysvg1 = $('#svg1');
mysvg1.find('#circle').css('fill', '#000000');
Try this :
var mysvg1 = $('#svg1');
mysvg1.find('[id="circle"]').css('fill', '#000000');
Normally you cannot do anything like that, document loaded in <img> is not a part of DOM of the host document.
But you can try to do something like this:
var img = document.getElementById("svg1");
// get the SVG document inside the img tag
var svgDoc = img.contentDocument;
// get that circle item by ID;
var svgItem = svgDoc.getElementById("circle");
// Set the fill attribute
svgItem.setAttribute("fill", "#000000");
I am not sure if img.contentDocument would work on <img>, on <object data="/svgs/mysvg.svg" type="image/svg+xml"> it works.
Hi i found this code online, its for a memory game created in JavaScript,
I want to be able to put images in the array instead of the letters that are there, how do I do it?
Thank You
you must add image source (src) to array, not images.
and if you want to change image , just change src.
<img id="myImage" />
<script>
var x = new Array('1.jpg', '2.jpg', '3.jpg');
var img = document.getElementById("myImage");
img.setAttribute("src", x[0]);
</script>
I have the following html:
<li>
<a href=\"p://emotion/appreciate\" onclick=\"flip()\">
<img src=\"smile.png\" />
</a>
</li>
Basically, I want the flip function to replace the src of the img enclosed in it to smile-inactive when pressed, and change it back again to smile.png if it's now already in smile-inactive.png. How can I do this without having to do document.getElementById if I don't want to give the img an id?
Inside your flip function, I would make sure that this points to the anchor you just clicked, then grab the img as the first childNode:
<a href=\"p://emotion/appreciate\" onclick=\"flip.call(this)\">
function flip(){
var img = this.children[0];
if (/smile\.png/.test(img.src))
img.src = "smile-inactive.png";
else
img.src = "smile.png"
}
EDIT
As #am not i am points out, you can achieve a slight gain in browser support by switching
var img = this.children[0];
to
var img = this.getElementsByTagName("img")[0];
Take both images, merge them to one, and just use offset to determine which one is shown.
You can do it by simply by CSS.