I have some code from an existing CSS map, and the part below is confusing as I think it has to do with making the rollover area (california1) more defined than a simple BOX.
My question: how does one write this themselves, and why use em and not pixels?
Example code:
#california1 .s1{height:.3em;left:14em;top:12.7em;width:.2em}
#california1 .s2{height:.5em;left:13.8em;top:12.6em;width:.2em}
#california1 .s3{height:.7em;left:13.7em;top:12.5em;width:.1em}
#california1 .s4{height:.8em;left:13.6em;top:12.4em;width:.1em}
#california1 .s5{height:.9em;left:13.5em;top:12.3em;width:.1em}
#california1 .s6{height:1em;left:13.4em;top:12.2em;width:.1em}
So to answer your first question, writing this yourself would be fairly simple -- I am viewing this out of context of the HTML, but I am guessing that each of those ".s1, .s2, etc" divs are just "segments" of the map.
EMs are used verses pixels because that will scale better than pixels when resizing a window, or viewing the site on a phone browser, etc.
em is relative to the font-size property. 1em equals current element font-size.
If you are working on a static image, try increasing your browser's text-size and see that your segments will grow, not fitting in the map anymore.
You're saying you want it more defined, I hope you're using map and area HTML elements to define the clickable parts. Use area coordinates with polyshape to best define each part of California:
<map name="california">
<area shape="poly" coords="x1,y1,x2,y2,... xn,yn" href="s1.html" alt="segment 1">
<area shape="poly" coords="..." href="s2.html" alt="segment 2">
...
<area shape="poly" coords="..." href="sn.html" alt="segment n">
</map>
Then assign it to your image with usemap:
<image usemap="#california" ... />
Here you have an example.
I don't know if its too obvious, I just hope it helps.
Related
The image is working just fine. Here is the code
<Image
layout="fixed"
src="/images/example.jpeg"
alt="Example image"
width="140"
height="140"
/>
But, when I run the website on web.dev, I don't get a topscore in Performance.
The main reason is Image elements do not have explicit width and height
I've studied this, and can tell from here https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=lr#images-without-dimensions
That width and height attributes is needed, which don't appear, using next/image
How do I solve this?
I am facing the same issue - changing layout to responsive did not solve the problem.
It rather looks like the component is missing the rendering of the supporting tags - it should actually be implemented as described in the initial lighthouse link.
Use curly braces to mention the size instead of string literals.
Use layout="responsive"
<Image
layout="responsive"
src="/images/example.jpeg"
alt="Example image"
width={140}
height={140}
/>
I have a image of map of a country.I want to click on a state and go to next page .How can i make some small rectangles or squares or circles on each state so that when i click them it links to respective page using html or css ??
There's a feature in HTML called Image map, which you can use like this:
<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
<area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" >
</map>
Look at this question if you want to add further style and functionality.
I've been doing a little hacking with wordpress ..via the editor.
I'm placing svg images and I've installed the SVG Support plugin
https://wordpress.org/plugins/svg-support/
When I insert a regular image (a png file) the code looks like this:
<img class="alignnone wp-image-146 size-medium"
src="mydomain/2-300x246.png" alt="2" width="300" height="246" />
and then the theme I'm using scales it as the browser scales up and down, which is what I desire with the svg image.
When I insert an SVG file, it does not show up until I modify the code by taking out the first class tag and add a new class tag:
class="style-svg"
like this..
<img class="style-svg"
src="mydomain/convo_and_notes2.svg" alt="convo_and_notes" width="1" height="1" />
Maybe I need to use a different wordpress theme or modify the one I'm using.. but first I want to know is it possible to get the same responsive behavior from an SVG file (I'm guessing it is ...but how?)
The wordpress theme I'm using is Flat by YoArts if that's helpful information.
Sorry if this is not the right way to phrase this question.. I'm not sure what I'm doing so it's hard to know what to ask.
In a nutshell, I want the SVG files to behave like the bitmaps and would love some advice on how to do that.
The wordpress uploader adds
height="1" wudth="1"
remove that and add
width="300px"
or something like that.
also to keep the responsive behavior don't remove the
class=""alignnone wp-image-146 size-medium"
that's it. The height and width were causing the problem.
So the new Picture element looks like this:
<picture>
<source ... />
<img browsers will fall back to this width="10" height="10" />
</picture>
In our CSS, we want to set say a background color.
picture {background-color: red};
img {background-color: yellow};
Will a Picture enabled browser just show a red background, while non enabled browsers show a yellow background? Or a combination of the two. Likewise, will an Picture enabled browser see the height/width attributes on the img element, or is the img element ignored completly?
The idea of the picture element is that that it simply provides source information for its enclosed img element, and that it is always the img element that is rendered, not the picture element.
However, I can't see anything normative in the spec that suggests that the picture element will be treated by default as anything other than an inline element, so I expect that you will be able to style it with a different display setting, give it padding etc., in the same way as you can do with span elements, in which case, the background-color will behave in the same way as a span element around an img element does today.
So targeting both might be appropriate. The backgrounds will simply layer as normal. But the img will be rendered, so in your scenario, the background behind the image will be yellow, assuming of course that the img has at least some degree of transparency.
Since no browser supports it, guess we'll need to wait to see the implementation, but by the looks of it so far, and according to current docs, it seems img tag will be completely ignored and only used as fallback.
The new implementation is as follows:
<picture>
<source media="(min-width: 64em)" src="high-res.jpg">
<source media="(min-width: 37.5em)" src="med-res.jpg">
<source src="low-res.jpg">
<img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
<p>Accessible text.</p>
</picture>
since you'll need to define the images inside <picture> element as sources and you won't have an img tag, implementation in browsers with Picture implementation shouldn't recognize anything inside an img tag unless the media src isn't defined.
However, it's easy to see this approach will cause a double download of images since browsers download all <img> tags first. Because of this, there's a proposal by David Newton: to use <object> or <embed> as fallback image containers to avoid duplication of images being downloaded.
All the above being said, we just need to wait, but in short, my answer is that your first option picture {background-color: red}; is the correct one
I'm trying to map an image using shape="poly". It works in Chrome, but doesn't work in IE or FF, and I'm not really sure why. I've tried duplicating the first coordinates at the end, and not duplicating them. Here's the code:
<map name="passport1_map" id="passport1_map">
<area shape="poly" coords="781,512,781,558,734,558,781,512" href="javascript:toggle_popup('passport2_div')"/>
</map>
<img src="../../css/challenges/sevenWonders/passportEmptyPage1.png" Usemap="passport1_map" width="800" height="567" />
Beacuse you're linking to a map in the same document, you need an anchor: usemap="#passport1_map"
(Actually I don't think browsers support external maps any more.)