When you link an entire image like in the HTML code below, can you still use image mapping to link a specific area on that image to a different address than what would be specified in the code below. For example, I have an image here: http://joshuamcauley.zxq.net/products/gloves/FBG2.png that when the user clicks on it a pop-up box appears with more information about the product. I was wondering if I used an image mapping program, can I make the Buy Now area add the product to the shopping cart or would the general link of the entire image over-ride this?
HTML
<img src="#">
What you are trying to do can be achieved by the html's map tag, so that you can map a particular section of the image to a specific href/perform different tasks.
Tutorial-HTML Map may be helpful to you on this.
Hope this is what you are looking for.
Related
I had a quick search for this problem and couldn't find anything that satisfied both parts so I hope this is ok to ask:
I am creating an interactive map which has an aerial image of a location as a background, with small icons overlayed over the top. These icons, when clicked should open a popup window with images or videos that have been taken in those locations, much like a google map.
I have found code to allow me to layer images over each other here:
Html Image over image
And I have found code for a popup here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
And I can get both of these elements to work separately on my webpage, however I'm stuck as to how to combine them so that the image I have overlayed can be clicked on to trigger a popup.
It's been a while since I have coded in HTML and I can usually handle these kind of challenges but I'm finding myself a bit out of my element here.
Thanks!
I want to get a picture of a motorcycle, by passing the mouse above tell me which parts it is (wheel, casing, handlebar, brakes ...) but I do not know how to do it. I searched but I do not know where to start. It's to put it on my website.
You can use the map tag to create regions in the image and create on hover actions for each region. See an example here
I want to create logo that bring to the homepage, currently I using image as link, but I want to create similar like in this picture (like in StackOverflow logo)
When I right click it didn't bring Save Image As...
How to create this?
In the image you put in the question, you can also see "Inspect Element". By clicking on it, you will be shown the relevant HTML code, and you could reverse engineer it.
The trick is to put the image as a background-image of the container using css.
I want to add link to the full article image, how to do this? I have to modify the article component?
I want to add to the component an option, Image link like this ...
It is possible ?
Or I have another Idea, It would be the best if the full article image shows floated near the article in a given size (example: 400px) and when the users click on the picture, the picture will show in the real size (example: 800px, or full screen) in a light box... it exists plugins for this ?
There is no easy answer to this. You will need to create some overrides for the article/category/blog views components/com_content/views.. on the frontend. You will also need to modify the core files administrator/com_content/models... http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core
Your best option really is to put the image in your article using the editor and adding a link to it with the editor. You would be looking to do a very time intensive task. You can the assign a css class to the image and float or size it however you wanted.
I have a very peculiar requirement and I am not an HTML expert. I need to create a CHM (Compiled HTML File) in which I want to use an image (a single screenshot) that will have parts of the image linked to other sections in the help file. In other words I want to hover the mouse to individual regions in the single screenshot to link to other parts of the help file.
Just for information the screenshot is a shot of various buttons and checkboxes that are a part of the application.
I do not wish to break up the single image into multiple images and then link each image to another part of the help file (that explains the function of the image). I think that is very much possible and not a problem at all.
If you can just in brief explain how this can be done or provide me a link I would be grateful.
You can use an Image Map for this. You basically have a normal image and then place various invisible shapes over the image. You can then use all the shapes for hover and click events.
With some googling I found this: http://www.htmlcodetutorial.com/images/images_famsupp_220.html
Consider using an HTML image map, which you can create online here. An HTML image map is a set of tags describing various regions of an image that can have links of their own.
Aren't those called "image maps"? HTML has a tag called <area> (and <map> itself) which allows you to do this.
http://www.javascriptkit.com/howto/imagemap.shtml
Try the HTML Image Map:
Creating HTML Image Maps
You'll need to use an image map for this. If you want to get a bit fancy and have rollover's for this you could think about using the ImageMapster jQuery plugin.
http://www.outsharked.com/imagemapster/examples/usa.html