<img src="demo_usa.png" width="960" height="593" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="#"onmouseover="this.style.backgroundColor='#00FF00';"
onmouseout="this.style.backgroundColor='transparent';"/>
</map>
Where is the problem with onmouse over friends?
I want to change the color when the mouse is over thea area shape
Thx verry much
An area element just specifies an area of an image, making it clickable. It does not set any rendering properties for that part of the image, so CSS settings on it are ignored.
To make the image change on mouseover, you need to use JavaScript code that replaces the entire image by a different one.
Related
I have created a chart in visualforce and I am embedding it on a wordpress site. However it is coming with a white box which I am trying to either get rid of or style it appropriately. How can I do that?
Here is the visualforce code.
I have also attached the chart.
<apex:chart height="300" width="330" data="{!pieData}" colorSet="#405395, #009345">
<apex:pieSeries dataField="data" labelField="name">
<apex:chartLabel display="middle" orientation="vertical" font="bold 14px Helvetica" color="#FFFFFF"/>
<apex:chartTips height="20" width="110"/>
</apex:pieSeries>
</apex:chart>
Thanks!
The white box is basically appearing because your image background is not transparent. Make sure that while exporting your image you are selecting a PNG format to make the background of the image transparent. You can also visit lunapic.com & use their transparent tool to make the background of your image transparent by simply uploading the image file there.
The design I am implementing has a generic "Account" button whose only content is a user icon (and a tiny dropdown icon).
Is it enough to add a title attribute to the button ("Your account"), or should I add text inside the button that I simply hide visually (while keeping accessible to screen readers), or both?
If you are using an input image button, use its alt attribute:
<input type="image" src="account-icon.png" alt="Your account">
If you are using a button with img, use img’s alt attribute:
<button type="button"><img src="account-icon.png" alt="Your account"></button>
If you are using an a with img, use img’s alt attribute:
<img src="account-icon.png" alt="Your account">
If you are adding the icon via CSS (instead of HTML), you should include a text label in the HTML and visually hide it with CSS.
For usability, you might consider using both, an icon and text. But this might be discussed at User Experience SE. See, for example, the question "When to use icons vs. icons with text vs. just text links?".
For deciding which alt text to use, see my answer to the question "What should the ALT text be for an image that is also a link?". You should not use the title attribute for specifying the alternative text.
So if it's an icon button I have an example on CodePen: A super accessible button with tooltip
This is the markup I use:
<button type="button" class="button">
<span class="button-icon" aria-hidden="true" data-icon="x"></span>
<span class="button-text"><strong>Navigation menu</strong></span>
</button>
You can hide the text content with css and make it visible on hover/focus. See example for more deatail on CSS.
Here is a list of what this method accomplish accessibility wise:
Is a native <button> and therefor inherits:
Mouse & keyboard (enter & space) clickability
Keyboard foucusability
Announciation as a button for screen readers
CSS injects icon, for non-visual web browsers
Hides icon for screen readers
Uses hidden text, for screen readers
Hides text by z-index -1 insead of off-screen to make it tapable with iOS using VoiceOver screen reader
Shows text as tooltip on hover and focus
Tooltip won't disappear on mouse over or slightly outside. This makes the text readable with full zoom.
You can either add a button text and hide id visually, or you can add an alt attribute to your icon (if it's an img). The latter is even better, on my opinion.
The following article provides information on using ARIA to enhance SVG accessibility: Using ARIA to enhance SVG accessibility. It's dated 2013 and contains several compatibility charts as well as the following code snippet, which had the best accessibility:
<svg xmlns=http://www.w3.org/2000/svg role="img" aria-labelledby="title desc">
<title id="title">Circle</title>
<desc id="desc">Large red circle with a black border</desc>
<circle role="presentation" cy="60" r="55" stroke="black" stroke-width="2" fill="red" />
</svg>
Put that inside a button and you should enjoy wide support. Of course, now that SVG2.0 has landed the ARIA usage may change slightly.
If using CSS ::after to place your icon your button will probably look something like this:
<button></button>
In which case you could do this and skip ARIA entirely:
<button>the label</button>
Otherwise the following should do the trick:
<button aria-label="the label"></button>
And here's the SVG Accessibility API Mappings (draft as of Jan 2019) which maps how SVGs should work in conjunction with accessibility APIs if you want to get more technical.
Though if you just stick a title inside the SVG it will likely work now simply because it's obvious.
Use aria-label for this. Example:
<button aria-label="Close" onclick="myDialog.close()">X</button>
From MDN:
The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.
Ok so I need some input on placing textual links to stay static to an image on a page..
The image is basically a cloud, with products branching out with logos and now textual links attached to each product.
what would be best way to go about this?
currently im thinking creating a div, setting the needed width and height.
Then from that. I will have the img positioned absolute within div, as well as the links all absolute positioned in same div...
does this sound about right?
Any other approaches to this?
<div id="subheaderhome">
<p class='hptext' id='wcp'> W</p>
<p class='hptext' id='rp'> R</p>
<p class='hptext' id='mp'> Meo</p>
<img id="shopsol" src="images/solshairpiece.png" />
</div>
Yes that approach will work but if you want the links to be positioned according to the image only,you should use position:relative over position:absolute.
position:absolute removes the element to be positioned from the normal flow of the document and places it in an exact location on the page.Meaning that the links in your case will remain in the same position even if you zoom in or out on your browser while the rest of the page changes in view.This will also make your page look messed up on a screen differently sized than yours.
I imagine you're creating an image with links. Here is another solution thinking out of the box a bit. Incorporate the link wording into the image design itself and use an imagemap to tell the browser what parts of the image are to be treated as clickable links. Then, the position of the links are in fact part of the image itself and you can skip over toying with CSS to get these links to behave properly.
First, you have the image tag. With the usemap attribute that must be '#mapname'. In this code, my map's name is 'home' so my usemap attribute is "#home".
<nav>
<img class="navbar" src="./images/navbar.gif" usemap="#home" alt="Home, Auto Service, Hours & Location, Contact Info, Image Gallery" />
Then, you write your map out in pixel pairs. On my page here, I have one long image of buttons rather than placing an image of the button 5 times, I made one image with 5 copies of my button. Each area tag is covering one rectangular (shape="rect") segment of the image. In the first one here, I am starting in the top left hand corner of the image at "0,0... (x,y). The rectangle's bottom right corner is 186 pixels to the right, and 40 pixels down from that first point, so it is ...186, 40" The href should be self explanatory to mean that those bounds link to it.
<map name="home">
<area shape="rect" coords=" 0, 0, 186, 40" href="index.html" alt="Mortensen Motors Homepage" />
<area shape="rect" coords=" 186, 0, 372, 40" href="auto_service.html" alt="Tullahoma Auto Service" />
<area shape="rect" coords=" 372, 0, 558, 40" href="hours_and_location.html" alt="Located in Tullahoma, Tennessee" />
<area shape="rect" coords=" 588, 0, 744, 40" href="contact_info.html" alt="Contact info" />
<area shape="rect" coords=" 744, 0, 930, 40" href="image_gallery.html" alt="Mortensen Motors image gallery" />
</map>
</nav>
So I used one image, and I made 5 links. This would be perfect for what you're doing because the coords="" attribute is based on the image's pixels by the image file, not by actual display size. Therefore, they do not stray from their intended areas of image coverage based on zooming.
I'm trying to find a way to simulate the image-mask property in CSS; currently it isn't available in most browsers. Is there a JavaScript library that could work?
I figured out how to do the buckles by creating a white image with a transparent space in the shape of a buckle, and then set a background color, so the background color only shows through where the image is transparent. The problem is, I can't do that for each part, because the white edges that you aren't supposed to see would be visible against the color of the part behind it (Like if you had a black square, and then you used that technique to get a red circle on it, you would end up with a red circle on a white square on a black square.)
It sounds like you're using indexed transparency - you'll want to use PNG images with 8-bit alpha channels instead. Then have an <img /\7gt; for each "component" of your item (i.e. one for the belt, one for the buckle, etc) then use absolute positioning to put each one directly on top of the other. The 8-bit transparency will ensure they all look right.
<div id="previewArea">
<img class="layer2" src="buckle{color}.png" />
<img class="layer1" src="belt{color}.png" />
<img class="layer0" src="pants{color}.png" />
</div>
Of course you'd need some client scripting to swap out each image for the selected color/design.
An alternative option is to have a server-side process dynamically generate images based on given parameters, it results in simpler HTML but would be slower for your visitors - it might work as a fallback for clients that don't support scripting.
In a small website where the pages are only composed by a single image with multiple links using html map, I want to resize the images (smaller images) but it is extremely painful to resize all the images and change all the link coordinates.
<div style="text-align:center; width:586px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_5201110040649307" src="http://site.com/ui_prototype/login.png" usemap="#Image-Maps_5201110040649307" border="0" width="586" height="1162" alt="" />
<map id="_Image-Maps_5201110040649307" name="Image-Maps_5201110040649307">
<area shape="rect" coords="59,550,297,614" href="http://site.com/ui_prototype/main_menu.html" alt="" title="" />
</map>
</div>
What is the better solution to solve the problem?
Thanks
You may zoom/scale the div,
example(half size):
style="zoom:.5;-o-transform: scale(.5);-moz-transform: scale(.5)"
Here's a little lib that solves this problem.
https://github.com/davidjbradshaw/imagemap-resizer
I think the best solution would be to resize the images and then write a small script that will allow you to select a rectangle (or simply click 4 times on the image), prompt for entering and URL and then spit out the HTML for that rectangle. This way it would be much faster to generate the map.
If you see yourself doing this again in the future, it would be better to build the map with real links positioned with CSS, but with the top & left coordinates specified as percentages relative to the image. This way you should be imune to size changes (but not to changing the image entirely).