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');
})
Related
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">
While I wasn't that concerned about it in the beginning, I noticed that my page size is about 9 MB (+/- 200 images). I want to somehow decrease this by only loading the image when the user hovers over the specific <a>, so that only that image is loaded (which should decrease the page size drastically).
The code below is what I'm using right now
<style>
div.img {
display: none;
position: absolute;
}
a:hover + div.img {
display: block;
}
</style>
<div>
Some Name
<div class="img">
<img src="http://sub.domain.com/somename.jpg" alt="Some Name" style="some styles">
</div>
</div>
I think it's possible with jQuery, but I don't know where to start.
Thanks in advance.
Well if you have around 200 images in your directory, when a client requests the webpage it is going to have to download the images to have them ready if you are using a single page layout. I would look into lazy loading just as Adam stated. If you can also I would suggest to try to compress the photos if you can to lower the file size if possible. Good luck!
I fixed my problem by adapting an existing pen-code to adjust my needs (using jQuery). It now works again in IE/Firefox
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '" style="display:block;position:absolute;"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change span to img using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
</script>
Hover over me to fetch an image
<span data-original="https://lorempixel.com/g/150/200/"></span>
you can put the image with no src attribute and put the specific src in the href of div or the image!
then use jquery to get the href of a or data-src of image and then give it to the image the code will be something like this:
<a class="image" href="the-src-of-the-image">
<img src="(leave this blank)">
</a>
and this is the jquery
jQuery(document).ready(function($){
$('.image').on('hover',function(){
var img_src = $(this).attr('href');
$(this).children('img').attr('src',img_src);
});
});
I want to create a custom "X" close or hide button, image, text that works for a complete element box in wordpress. I've attached a sample image of the "x" on something else. For my site however I need it to control the whole element or (tiles) on my page not just the single box of text.
Sample image
This is a easy task for you, basically on this situation what you have to do is create the "x" graphic with any iconfont or you can use the "X" from any font(like a regular x that you just have to touch your keyboard) then what you have to do is follow this example.
HTML
<div class="yourbox">
<!--- THIS IS THE BOX THAT YOU WANT TO CLOSE, you can use id or clas whatever you want-->
<p> text or content of the box <p>
<a id="close"href=""> X </a>
</div>
CSS
.yourbox{
height:100px;
width:400px;
background-color: red;
}
JS
<script type="text/javascript">
$(function() {
$("#close").click(function () {
$( "#yourbox" ).css( "display", "none" );
});
});
</script>
You could name the function as you want, use class instead of id and basically the code will hie the div after you touch the " X ".
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.
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.