Is it possible to link an image map from one page to an img within a different page using usemap?
I have my image on "first page" and got the image map on "second page" and I want to link em using usemap attribute, I know that the hash symbol before the map name in usemap value is to indicates that this map exists in this page so I was wondering if I can, in this case, link an image map from another page
here is what I have done :
this is from the first page which contains the img only, this page name is "first.html"
<img src="https://i.pinimg.com/564x/c5/79/c0/c579c0ebf4c0ea8f7e7f932c87af1cce.jpg" alt="product" usemap="second.html#mapo">
and this is from the second page which contains the img map only, this page name is "second.html"
<map name="mapo">
<area shape="rect" coords="390,417,172,191" href="https://www.pinterest.com/pin/506655026846033319/">
</map>
both pages/html files r in the same folder
I tried what I mentioned above but it didn't work and I don't know why
Related
How do I link the image logos to the price table below the image logos? I can not link the logos, so the price table change page/list when clicking on the logos? Can it be done with only html? :)
Link: https://defektskaerme.dk/priser/
Click on the image and change URL links as below e.g for apple
https://defektskaerme.dk/en/#1564036204144-6e919b1d-df47729d-428ed02f-c30f
for en add this url before #
https://defektskaerme.dk/en/
for regular site add this url before #
https://defektskaerme.dk/
I would like a HTML to get an image file name as a parameter from another page and display that image. I only know a bit of HTML. I don't know PHP etc.
I have a website which has several HTML pages. I want to write an "image container" page which will be called from other pages. The other pages will pass it a bitmap file name and the container page will display that image.
Ideally the container page should be getting few other parameter like the width and height of the image.
In showimage.html:
Instead of this:
<img src="bitmaps/test.jpg" height="200">
Have something like this:
<img src="{parameter 1}" height="{parameter 2}">
And the calling page will call showimage.html with "bitmaps/test.jpg" and "200".
So, I have managed to upload images to my desired location and I gave name to these images same name of object property for example: fruit contains name apple and I have an apple.jpg.
I am able to see image directly when I call <p:graphicImage name="apple.jpg" id="image" width="40" height="20" library="images" />
Imagine that I have a datatable which contains all fruits and when i click on some fruit I want to get picture of that fruit.
if(item.getFruit().getLogo().getName() == item.getFruit().getName()){
//show me image
}
I've searched whole stack and I've got lost.
I will assume that:
You have a folder with images
Each image url is saved as String field into Fruit entity.
So, when you load a Fruit entity from database, you have a image full url.
<ui:repeat var="fruit" value="#{fruitBean.fruitListFromDatabase}">
<h:graphicImage value="#{fruit.imageUrl}" rendered="#{!empty fruit.imageUrl}" />
<h:graphicImage library="images" name="no-image.png" rendered="#{empty fruit.imageUrl}" />
</ui:repeat>
The previous code will render an image per Fruit, in case of no image uploaded (imageUrl is null), then a custom no-image.png is show.
h:graphicImage must use specifying library and name attributes when you have a image inside resources folder of your webapp.
Use h:graphicImage with value attribute, to show a full image URL.
Why we must not store uploaded images inside application resources file? Because on redeploy, the images will be lost.
To serve your custom folder, you can use some aproach that allows you create a virtual served directory, for example, if you are using Glassfish, in the glassfish-web.xml, you need to make a reference to external folder with the images:
<property name="alternatedocroot_1" value="from=/media/* dir=/data" />
Now, the images can be found: "your-domain.com/media/some-image.png"
I added AMP-Pinterest to my AMPed page. I'd like to set the propery
data-pin-hover="true" to get the PinIt button on the image. For some reason it doesn't work.
Here is what I have so far:
That's in <head>:
<script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>
(and of course other AMP stuff)
That's in <body>:
<amp-pinterest height=28 width=56
data-do="buttonPin"
data-url="URL"
data-media="IMG_URL"
data-pin-hover="true"
data-description="DESC">
</amp-pinterest>
I also added data-pin-nopin="false" and data-pin-no-hover="false" to my amp-img's declaration (just in case, if it's not by default set to false. More info here: https://www.ampproject.org/docs/reference/components/amp-pinterest):
<amp-img alt="NAME" src="IMG_URL" width="600"
height="400" layout="responsive" data-pin-nopin="false"
data-pin-no-hover="false" />
But it still doesn't work (the PinIt button shows up above/below amp-img).
Question:
Now I'm wondering if I did something wrong or it's simply not supported using AMP-Pinterest to hover an image? (I can't find any example).
Unfortunately, this option doesn't to be available for amp-pinterest at the moment (going through the docs and other examples). However, if you don't prefer for the Pin It button to not appear above or below, you can instead have it embedded in the image, as seen in the amp-pinterest samples:
Embed pin widget
To embed the pin widget, set data-do to embedPing. The data-url attribute must contain the fully-qualified URL of the Pinterest resource.
I have lots of identical images which share a common map:
<map name="mymap">
<area shape="polygon" coords="0,0,64,0,32,32" href="ref1">
<area shape="polygon" coords="64,0,64,64,32,32" href="ref2">
</map>
<img src="image.jpg" usemap="#mymap">
<img src="image.jpg" usemap="#mymap">
and I would like the followed link to depend on:
1. which image was clicked,
2. where in the image the click was.
Above, I differentiate the locations in the image, but I wonder if there is a way to do something different depending on which image was clicked?
You could write some JavaScript to clone the map, rename it and assign it to a list of images.
or
Capture the mouse click coordinates and determine where the click is is relation to which image. If they're in a row you only need to check one coordinate.
You can trigger JavaScript using the href:
<area shape="polygon" coords="0,0,64,0,32,32" href="javascript:myFunction(1)">
<area shape="polygon" coords="0,0,64,0,32,32" href="javascript:myFunction(2)">
if you give each image an id attribute, i think you might be able to use a little bit of jquery to target the map element of each image and change the location of the window in javascript.
something along the lines of
$("#imgId map").click(function(){
window.location = "http://www.google.com";
}
$("#imgId2 map").click(function(){
window.location = "http://www.stackoverflow.com";
}
depending on the amount of images you have, if this seems like a lot or too repetitive, there might be a smarter way of being able to handle the links in javascript automatically.