I have to generate <map> and <area> elements on a web page containing many images. Each image would have to be linked to its appropriate <map> via usemap="#map1", usemap="#map2", etc...
As a nasty hack for this situation, I'd like to add one 1x1 absolutely positioned (top:0, left:0) <img> (the anchor-image). Then, I'd combine all the <area> tags into one <map> (the super-map), referenced by the anchor-image.
Trying this, the <area> tags defined in the super-map do not activate when I mouseover them (they are outside of the 1x1 anchor-image). I tried making anchor-image width:100%, height:100% and playing with its z-index (I still have to interact with the images on the page for other reasons). Unfortunately, when the z-index makes the <area> elements clickable, it stops me from interacting with the images.
Any ideas on what else I can try? Thanks!
Can you elaborate on why you need so many maps? If you have a lot of images, why not split each one into a single action and simply place them in a tags?
Or, why not combine the images into a larger one and then have fewer maps?
Related
I am just learning to code and have been looking everywhere for an answer on this one and for some reason cannot find anything.
I noticed that it seems to be common practice to put an image inside of a container or wrapper. For instance, rather just having:
<img src="url"/>
Everyone seems to be in agreement that it needs to be this way:
<div class="container">
<img=src"url"/>
</div>
What is the purpose of wrapping the img inside of a div in this way? It seems to have something to do with "responsive design", but I'm not 100% sure. Is it just so that we have something to size the image relative to, rather than using definite sizing like pixels on the image selector in css? The more I think about it as I write this, the more it seems to be the right answer, but I'm not sure if there's something else I'm missing on this one.
Any insight would be very much appreciated. Thank you.
unfortunately there is no "single" correct answer for this.
There can be many reasons as to why one would wrap any element in another element, it is not specific to <img /> tags :)
In your question I read something like this (converted to real world example):
I see that it is common practice to put a frame around a photo.
Where the "frame" would be the wrapper element, and the photo would be the <img />.
Looking at it this way might make it seem more clear. The photo is the most important part, technically speaking you don't need a frame to show the photo. If you have just a photo, you won't be able to hang it on your wall without damaging it by driving a nail through the top or applying some tape. If you have a frame though, you can make that photo take up any amount of available space within it, you can use the clip to hang it on a wall and if you put multiple photo's in the frame, you can move them all at once since they are in the same frame.
The reason most people put that image in a "container" is because they get some sort of advantage out of it over using an image alone, this could range from aspect-ratio locks to relative positioning. In some cases, a wrapper is required to achieve certain (notably more complex) animations as well.
Websites are built out of "logical" pieces that, together, form a website. The individual pieces are all "frames" that "flow" together to create any page layout you see on every website.
It is merely a structural way of thinking, if the purpose of that image was to be used as a background image for the entire page, a better alternative would be to use CSS background-image property on the <body> tag and not use the image at all. But if the image is meant to be part of a smaller part of your website, it should probably be contained as appropiate.
This answer is in no way a guide to go by, nor a ruleset or anything like that, they are just the thoughts of another developer. There are countless reasons for wrapping an element and this answer doesn't even cover 0.0000001% of those cases. I'm just saying -- there's no specific reason to do or don't here.
Background:
I'm trying to create a rotating image banner with several links, each link being different. The FIGURE are set inside a DIV which is nested inside another DIV for centering and positioning purposes.
Current JSFiddle:
Available here without WebKits.
Problem:
Although I tried with several combinations, inside the markup and CSS, never does it trigger the anchor in any of the images (I have not set any effect on hovering yet, not to confuse the code). I deleted the anchors so you can see the base code before the tests I did. It functions now as perfect Pic Slideshow, yes, but that is not the intent.
Need:
To know what to do with an A tag for it to work on each of the images separately, in order to transform the PIC SLIDESHOW into an alternative to a Slider.
Code type restrictions:
I do not wish to use a JQuery in the solution, only CSS, HTML and the smallest JavaScript possible if everything else fails
Many Thanks
I'm developing a desktop software application which looks for errors in web pages and can highlight them in the browser. Highlighted areas are somewhat arbitrary. They could be one word in a p tag, an entire a tag or an img.
In the past I've done this by rewriting the html and adding styled span tags around the highlighted area. The downside is that quite often the highlights can be obscured. For example where in image is in a div exactly its size with no overflow, any applied border, background etc. will be obscured.
What's the best way to approach this? Are there any good examples of this being done in popular software / webapps?
Limitations: I can't use JS (files are local and browsers often block this). I can however user the latest standards. The output doesn't have to validate, as long as it works on common modern browsers.
Since background colors and borders can't be used, I think you'll need to place something on top of the offending element or text. Perhaps you can use an absolute or fixed position <div> element with a partially transparent background.
Of course, this could get tricky with getting the coordinates. But you might be able to use the same thing you used to do with the span and add some dummy elements within it to trick it into thinking that 0,0 is right where your span element is.
This question already has answers here:
When to use IMG vs. CSS background-image?
(31 answers)
Closed 9 years ago.
What's the best practice and established way to portray an image? I am working from the assumption that it shouldn't be done in HTML anymore so I am not using the img tag in my markup. Instead, I am linking the image in my CSS via background: url('dir'). If I am already going wrong with this assumption, let me know.
If linking an image in CSS is the correct (or at least a good, well established) way to go, then the next question is what HTML tag to use in the document? Technically, images can be applied to just about any element in HTML, so which one's the right one to use?
Case in point: Right now I am working on a row of icons where each icon has some text underneath it. At the moment, I have it set up as an unordered, horizontal list and I am applying the image and text in my CSS to each individual list item tag. However, there are several other ways I could do this. I could have a row of divs or spans, for example. Or I could use the img tag without defining the src property in the HTML and instead setting it in the CSS (at least I think this is possible). Or several other ways I can think.
What is the best practice in cases like this?
Images should be displayed with the <img> tag if the image is contextual information on the page. For example, if you have a web page showing custom swimming pools you build, your image of the swimming pools (under normal circumstances) should be set on the page using the <img> tag with an appropriate alt attribute.
// Shows a picture of a pool, provides contextual fallback text
<img src="pool.png" alt="The 'Custome' style pool." />
CSS background images are used more for stylist or decorations on the page. The background image of your webpage is not contextual, so it is set with a background image, for example. However, CSS background images are used for things such as sprites or JavaScript sliders. In these cases, special measures are taken to make sure they are still specified as contextual content (such as setting the title attribute).
// Alert icon is just a design element and does not
// provide context to the page
<div class="alert-icon"></div>
.alert-icon{background:url('alert.png');width:42px;height:42px}
It is also important to note that, by default, <img> will be printed and background-image will not. Chrome, as well as other browsers, now have an option to turn on background printing, but if you want to be 100% certain an image prints, <img> is the way to go.
TL;DR: For the majority of cases, use <img> for contextual images with proper alt attributes. Use CSS background images for decorations or sprites that do not convey context to the site.
Using CSS to display images using the background property is best if you want to display a sprite whose image can be manipulated via class or id. Other than that, using the <img> tag is still in practice.
I want to build a 10 x 10 thumbs of pictures in html page. (aspx)
there is a lot of options how to do it.
my question is : which html tag( which will contain the picture - is being rendered the most fastest !!
p.s.:
a) the picture is not pressable :
b) I dont have the ability to create sprite image.
options :
1) div with background image
2) img tag
3) maybe other option ?
Since this is a tabular format, you should use a table.
To avoid reflows use the width and height attributes for the rows and columns to ensure the browser renders the container table correctly to begin with. This also means setting width and height on the img elements.
So, use a table with img elements in each cell.
Opinion:
From my experience background images tend to load faster, altough images with height and width specifed can load faster, but I don't think you have that option. I also know you don't have the option for sprites, which are actually good because the image is loaded once.
It depends a lot on how big the files are, but I'd go with img tags for simplicity and flexibility.
The best performace all around would be to use a sprite, i.e. combine all the images in one (there are online tools to do that), then use css to show only the section that you need.
Loading images in the background renders faster than using an image element, but the difference would hardly be noticeable in this case. Also semantically it sounds like image elements would make more sense - if you turn off images then the page wouldn't make sense, they are not just decorative elements.