I want to change part of an image when it is hovered.
I have defined a map for the image with 2 areas (circle).
For the first one, I tried to change the src of the image when the circle is hovered via onmouseover on the area. But it blinks on Firefox so it does not seem to work.
For the second one, I let an image appear on top of the other image. It works fine on Firefox (unless I add a tooltip with onmousemove, then it also blinks non stop).
It does not seem to work in either cases on Edge. It's not even getting into the page_bar_mousehover(...) function. I don't understand why, as map and area seem supported.
How to make this work and cross-browser compatible?
function page_bar_mousehover(item) {
switch (item) {
case "tooltips_choices":
document.getElementById('page_bottom_right_bar').src = "./resources/page_bottom_right_bar_hover_tooltips.png";
break;
case "hexes_choices":
if (document.getElementById('page_bottom_right_bar_hover_hexes_img').style != "") {
document.getElementById('page_bottom_right_bar_hover_hexes_img').style = "";
}
break;
}
}
function page_bar_mouseout() {
document.getElementById('page_bottom_right_bar').src = "https://i.ibb.co/zS1g5jK/page-bottom-right-bar.png";
document.getElementById('page_bottom_right_bar_hover_tooltips_img').style = "display:none;";
document.getElementById('page_bottom_right_bar_hover_hexes_img').style = "display:none;";
}
html {
height:100%;
}
body {
min-height:100%;
background-color: black;
margin: 0;
}
#page_bottom_right_bar_hover_hexes_img, #page_bottom_right_bar_hover_tooltips_img {
position:fixed;
right:0;
bottom:0;
}
<div id="main">
<img id="page_bottom_right_bar" src="https://i.ibb.co/zS1g5jK/page-bottom-right-bar.png" style="position:fixed;right:0;bottom:0;" usemap="#page_bottom_right_bar" />
<img id="page_bottom_right_bar_hover_hexes_img" src="https://i.ibb.co/Dt8b5Vb/page-bottom-right-bar-hover-hexes.png" usemap="#page_bottom_right_bar" style="display:none;" />
<img id="page_bottom_right_bar_hover_tooltips_img" src="https://i.ibb.co/5Gm0PTK/page-bottom-right-bar-hover-tooltips.png" usemap="#page_bottom_right_bar" style="display:none;" alt="coucou" />
<map id="page_bottom_right_bar">
<area id="page_bottom_right_bar_hover_hexes_area" shape="circle" coords="26,132,21" alt="Tooltips choices" href="#tooltips_choices" onmouseover="page_bar_mousehover('tooltips_choices');" onmouseout="page_bar_mouseout()">
<area id="page_bottom_right_bar_hover_tooltips_area" shape="circle" coords="26,177,21" alt="Hexes choices" href="#hexes_choices" onmouseover="page_bar_mousehover('hexes_choices');" onmouseout="page_bar_mouseout();;">
</map>
</div>
Your problem is mainly that the map element is not applied correctly, it must have name attribute so that it can be referenced. For more details, you could refer to this document: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map#attributes
In your example, you only need to modify the <map> id attribute to name, or add the name attribute:
<map name="page_bottom_right_bar">
Related
I am looking to contain my image sizes once they have been clicked on,
currently they are shown larger than I wish for them to appear.
Example: http://messaages.com/post/144951542174
HTML: https://gist.github.com/anonymous/4f09e3306f9b28ee0dce286342c51c7e
I have played around with various sizes within the code but I can't seem to be able to change it.
If you want to change the image sizes once they are clicked on you will want to use javascript to change the css.
<img onclick="imageChange(this)" style="width: 200px; cursor: pointer;" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<script>
window.imageChange = function(image) {
if (image.style.width === "200px") {
image.style.width = "100px";
} else {
image.style.width = "200px";
}
}
</script>
JS Fiddle: https://jsfiddle.net/ws12fqzc/
I have images with dynamically generated image maps. I want users to be able to click on the map and be taken through to the <area href= property.
However, when they click on the background (i.e. not in any of the map's areas) I want them to go through to a background URL.
So my code looks something like this (fiddle):
<a href="fromAnchor.html" target="_blank">
<img src="image.png" usemap="#test" />
</a>
<map name="test" id="test">
<area href="fromMap.html">
</map>
In Chrome/FX it works as I expect - if I click in the area tag's shape I get taken to fromMap.html, if I click elsewhere I get directed to fromAnchor.html.
However, in IE (tested up to IE10) clicking on the img but outside the area does nothing. It does show the URL hint in the bottom left corner, but it doesn't follow the a tag.
Is there a way around this?
I came up with a solution, but it's kind of awful (so would be very happy to see a better answer).
My workaround is to dynamically add a fallback <area> that fills the entire image and let clicks outside the exiting area's fall back to it:
var msie = /MSIE/.test(navigator.userAgent);
if (msie)
{
// Don't do this hack twice
$('map[data-iehack!="1"]').each(function ()
{
// First find the image this map applies to
var $this = $(this);
var name = $this.attr('name');
var $img = $('img[usemap="#' + name + '"]');
// Then find if the image is in an <a> tag
var $link = $img.parents('a');
if ($link.length > 0)
{
// If there is an <a> add an extra <area> that fills the image
var wrapLink = $link[0].href;
var width = $img.width();
var height = $img.height();
var $fallbackArea = $('<area shape="rect" coords="0,0,' + width + ',' + height + '" />');
$fallbackArea.attr('href', wrapLink);
$this.append($fallbackArea);
}
// Flag this map so we don't add it again
$this.attr('data-iehack', '1');
});
}
This example is in jQuery but the principal should work in other frameworks.
There has to be a better way than this - and this hack has to check the browser as I can't figure out how to detect IE's failure here.
Is it possible to include a sort of transparent box with an Image Map? People would hover their mouse over it to display a box that could have content inside?
I thought of this earlier but wasn't sure how to do it.
I would say it is most definitely possible. I would probably try using some jQuery to get which map element is being hovered and then displaying some sort of span.
You may also be able to set an id to the specific areas and on hover set background to whatever you want. (Haven't tried this, but just a thought)
Here is a simple example. This highlights a box, so just edit the CSS to hide/show/position it. I've used the HTML5 "data-" element to store data that is used to identify the corresponding element in the event handler.
<img width="400" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/World-map.png/800px-World-map.png" usemap="#demo" border="0">
<map id="map1" name="demo">
<area shape="rect" coords="0,0,100,100" href="#" data-element="a" />
</map>
<div id="a">Info goes here</div>
CSS:
.active {
border:2px solid #ff0000
}
JS:
$('#map1 area').on('mouseover',function() {
var target = $(this).data('element');
$("#" + target).addClass('active');
})
$('#map1 area').on('mouseout',function() {
var target = $(this).data('element');
$("#" + target).removeClass('active');
})
I have tried the whole afternoon but I'm missing something, can some one help me with this?
The page can be found at the following link
The page with the image that I need fixed.
The code containing the image is:
<headerimage><span>
<img width="1920" height="600" src="http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg" class="attachment-post-thumbnail wp-post-image" alt="Suits Header" title="Suits Header"></span>
</headerimage>
I would like to horizontally center the image with a width of 1920px on smaller screens. When I give a class the property background-position: top center, it works perfectly, but when I need to have a -tag in the page itself I can't seem to make it happen.
Please help me see it :) It's probably very stupid, haha.
Thanks so much!
Set margin: 0 auto; on the image, like:
<headerimage>
<span>
<img style="margin:0 auto;" width="1920" height="600" src="http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg" class="attachment-post-thumbnail wp-post-image" alt="Suits Header" title="Suits Header">
</span>
</headerimage>
I would not put this in as an image but as a background on your header.
background-image:url('http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg');
background-position-x:center;
background-repeat:no-repeat;
see http://jsfiddle.net/dwat001/Q58YZ/ for a rough demonstration.
Another approach if you cannot use background-image is to use javascript to position the image.
<style>
#imageHolder {
overflow: hidden; // if image is bigger then holder, clip the image, no scollbars.
}
#wideHeaderImage {
position: relative; // treat "left" as relative to the images normal position.
}
</style>
<headerimage id="imageHolder">
<img id="wideHeaderImage" width="1920".../>
</headerimage>
<script src="jquery"></script>
<script>
// create function to center image;
var centerImage = function($) {
var windowWidth = $(window).width(); // get the current width of the window
var imageSize = $('#wideHeaderImage').width(); // get width of image
$('#imageHolder').width(windowWidth); // set the containing element to be size of window.
if(imageSize > windowWidth) { // if image is wider then window
var offset = (imageSize - windowWidth) / 2; // Establish an offset
$('#wideHeaderImage').css('left', '-' + offset + 'px'); // apply offset
}
};
jquery(function($) {
// this code runs within on load
// register a resize event handler
$(window).resize(function(event){centerImage($);});
// resize once on onload.
centerImage($);
});
</script>
I have not run this so I've problably made some mistakes hopefully enough for you to get the gist of what I'm doing.
i have simple application which should work on keyboard events like onfocus and onblur instead of onmouseover and onmouseout.
here is my code snippet to zoomin/zoomout:
<script>
var nW,nH,oH,oW;
function zoom(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage)
{
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge))
{
nW=iWideSmall;nH=iHighSmall;
}
else
{
nW=iWideLarge;nH=iHighLarge;
}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>
calling this function in this way:
<td align=center valign=middle >
<figure>
<button style="background-color:black; height:160px;width:160px ; border:none"><img src="F:\rashmi\icons_tv\Help_Normal.png" onfocus="zoom('57px','120px','96px','136px',this);"
onblur="zoom('57px','120px','57px','120px',this);" > </button>
<figcaption><font size="5" color="white" style="font-weight:bold"><center>help</center></font></figcaption>
</figure>
</td>
but problem is when i select image using tab key i cant see any zoomin/zoomout effect. if i replace onfocus/onblur with onmouseover/onmouseout respectively it works well.
please some one help me where i am going wrong.
regards
rashmi
You will not get focus on an img element by tabbing but on the button element instead. Move your onblur/onfocus events to the button element. This will change your button's size each time you focus/lose focus on it, but it will not change your image size. What you have to do then is to modify your code so the change is mapped on the button's contained image dimensions as well. Something that I can think of right now is
<script type="text/javascript">
var nW,nH,oH,oW;
function zoom(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichElement)
{
theImage = whichElement.firstChild;
theImage.style.width=nW;theImage.style.height=nH;
oW=whichElement.style.width;oH=whichElement.style.height;
if((oW==iWideLarge)||(oH==iHighLarge))
{
nW=iWideSmall;nH=iHighSmall;
}
else
{
nW=iWideLarge;nH=iHighLarge;
}
whichElement.style.width=nW;whichElement.style.height=nH;
theImage.style.width=nW;theImage.style.height=hH;
}
</script>
Here, the first child of the button element, which happens to be the image, takes the same height and width with the button, whenever that changes.