I can't recall what the process is called but I need a means of creating like a hotspot zone on a web page, so that, when the user hovers there mouse pointer over this zone, the cursor changes to a pointer, which will then allow the user to go to a particular site.
Please note that I am not referring to a simple anchor tag around an image, I am specifically after a means of determining coordinates on a web page which will then turn this area into a hover zone.
A very simple solution is to position an anchor tag to a specific point on the page.
<a id="hotspot" href="#!link">hidden hotspot</a>
#hotspot {
position: absolute;
width: 100px;
height: 100px;
background: transparent;
display: block;
top: Xpx;
left: Xpx;
text-indent: -10000px;
}
Sounds like a simple anchor that is absolutely positioned
Although I'd recommend the absolutely positioned links as mentioned above, it sounds like you're looking for an image map.
Others have suggested positioned anchor tags, but since you mention coordinates, it almost sounds like you're looking for an old-school imagemap. It's ancient, but if you want some arbitrary shapes, maybe it's an option. Remember these?
<img src="yourpic.png" width="500" height="400" usemap="#themap">
<map name="themap">
<area shape="polygon" coords="0,0,100,0,100,100,0,100" href="..." id="foo" />
<area shape="circle" coords="150,30" href="..." id="bar" />
</map>
I don't know the specifics of your requirement, but maybe you could throw something together with a big blank image, define a bunch of polygons and/or circles, add some hover behaviors to each area, and go from there.
Related
I am building an interactive educational small app, where I help kids discover the different parts of body.
http://www.easypacelearning.com/images/TheWholeBody.jpg
Technically, I want to know how can I select some parts in the image, to let users click on a portion of an image and link to a new more specific image.
Example: I am putting the body of human as a background, and I would like to click on an eye, it would pop-up and say it's an eye.
How can I get points so I can hover using the mouse to recognize the part ..
function getData() {
return {
'Head': {
color: ...
points: ..
},
'body': {
color: ...
points: ..
},
'leg': {
color: ...
points: ..
}
}
}
Link that I use to experiment :
http://jsfiddle.net/ozgsvc61/1/
You can achieve this with an "Image Map". This is a long forgotten feature of HTML.
To create linkable areas in your image, you use the <map/> element along with <area/> elements.
The <area/> elements, like the name suggests, define clickable areas in an image, and you can give them a 'polygon' shape, which sounds like what you're looking for.
A simple example:
<map name="body-parts">
<area shape="poly" coords="..." href="#eyes" />
</map>
EDIT:
I don't think you can listen to click events with this, but you can definitely use hashchange event.
You can add elements to you image and position them absolute like this:
#eye {
position: absolute;
height: 10px; // size of area
width: 10px;
top: 20px; // position
left: 20px;
cursor: pointer; // make it "feel" clickable
// maybe you want to make a circle instead of a rectangle, you can do this with
// border-radius (thanks to J148)
border-radius: 10px;
}
Now you can use JS to get the click and display anything you want, in JQuery e.g.:
$('#eye').click(function(){
// this is an eye !!!
});
Its maybe easier to use a data attribute to get the content easier.
<div class="area" data-content="This is an eye"></div>
In JQuery:
$('.area').click(function(){
content = $(this).data("content");
// show content in any way
});
i am currently making a website that s designed to be a test. It has an image and an image map, i am trying to use JavaScript to get the clients screen size and resize the image to fit the clients screen size but when i do the image map is not were i need it to be. Is there a way to get the image map to stay in the same place with out having to "physically" resize the image in paint or Photoshop. My site (with out getting the clients screen size). Basically i am trying to make the image fit their screen so its easier to navigate the test,its realistic, but without screwing up my image map positioning. Any hep would be much appreciated.
`<map name="desktopmap" >
<area onclick="correct();" shape="rect" coords="1,575,38,597" href="OS2.html" >
</map>
<img onclick=" wrong('OS2');" src = "../Pic/desktop.png" usemap = "#desktopmap" >`
Thank you.
What you can do instead is use absolutely positioned divs with percentage-based coordinates and dimensions, and hook your click events into those. That should allow your invisible "buttons" to scale nicely with the image. Image maps are a bit outdated and not very flexible.
Example fiddle (updated with correct/wrong functions):
http://jsfiddle.net/3ZLeK/1/
Example new HTML structure:
<div class="wrap">
<img class="bg" src="http://i.imgur.com/WgsCTDj.gif" />
<div class="box box1"></div>
</div>
Example new CSS:
.wrap {
position: relative;
overflow: auto;
}
.bg {
float: left;
width: 100%;
}
.box {
position: absolute;
cursor: pointer;
}
.box1 {
top: 95%;
left: 0;
width: 7%;
height: 5%;
}
In the fiddle I also changed your inline Javascript handling to use event handlers, because those attribute handlers are outdated as well.
You may use mediaqueries to rescale/zoom your map .
two experimental test here : http://dabblet.com/gist/5586117 and http://codepen.io/gcyrillus/pen/AJHmt
If you follow this idea, and think of using zoom + javascript instead of mediaquerie to include older browser such as IE , beaware of that some version of IE understands both : transform:scale(x); and zoom:X; . make sure you do not aplly twice a rescalling in that case.
Basicly , coords are pixels coordonates, a scaling is the only way, unless you modyfy each values of each coords :)
... not too sure my english is clear/correct enough.
Alright, so I was wondering if there was an alternative, lightweight way to creating an image map.
Basically, I want to take this image:
And have the sections of the diagram light up when they are hovered over, kinda like this (I've mocked it up in photoshop):
The other sections (which I haven't named yet) should be able to do the same. Also, I'd like to be able to use javascript later to have sliding links appear from behind those sections (I roughly know how to do that now, so I'm okay that)
Does anyone have any suggestions? Just a general direction on what to search for would be great.
Map tag would be good and it is not actually heavyweight as it does not require any external plug-ins.
However, since you just want a general idea: Once due to some error, I wasn't able to use map tag. So I split the original image into different images (positioned them as the original image was) and then used events on separate parts.
Tiresome, but a workaround.
Circles are easy to do with CSS. You can start with something like this :
width: 140px;
height: 140px;
background: rgba(255, 0, 0, 0.3);
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
FIDDLE
Hope it help.
It's difficult for me to achieve that white shape in the middle, but here's a simple try:
http://jsfiddle.net/w8zTz/
Only with three div and a few css:
HTML
<div class="rojo"></div>
<div class="azul"></div>
<div class="amar"></div>
CSS
div {width:100px; height:100px; border-radius:100px; position:absolute; opacity:0.5;}
.rojo {background:red; top:0; left:30px;}
.azul {background:cornflowerblue; top:60px; left:0;}
.amar {background:gold; top:60px; left:70px;}
div:hover {opacity:1; z-index:-1}
(Z-index is for stack the div behind the other and reach transparency).
Hope this helps :)
Take two images
1)normal image
2)the particular section higligthed when hovered image
<img id="originalimage" src="originalimage.png" width="140" height="140" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="77,18,127,90" href="#" onmouseover="onHover('higlightedimageonhover-imagesrc.png')" onmouseout="onout6('originalimagesrc.png')"/>
</map>
<script>
function onHover6(image1)
{
document.getElementById('originalimage').src=image1;
}
function onout6(image2)
{
document.getElementById('originalimage').src=image2;
}
</script>
Here when you hover on the co-ordinates, the image changes to hoverimages and on mouseout it changes to original image.
Well, i have to ask something complicated before i even start. I have a website on which there are facial images of workers. All images have rounded corners. I thought about idea that i can export image with fake rounded corners and opaque inside so photo of worker which is beneath can fit in.
Is there some way to do that?
In case you really need to put an image on top of the other one, just use the z-index property:
<img src="border.png" alt="" style="position: absolute; z-index: 1;" />
<img src="worker_photo.png" alt="" />
In this case, the image "border.png" will show up over the "worker_photo.png". If they have the same size, it will look exactly like what you want. But for rounded corners the previous reply is better. :)
There are some ways of preforming what you want.
you could use a div with width and height set, and then apply the rounded corners image on it.
You could just use the border-radius property which has a very good modern browser support (with vendor prefixes), example:
img.employee {
border-radius: 10px;
}
Good luck ;)
http://clifgriffin.com/blockade2/
Ok, I have an unordered list that serves as a list of menu links. In each li there is a div that is set to absolute positioning, bottom: 0. The idea is you hover over the link in the li and jQuery animates the height to show the hidden menu div.
It's a simple concept, but I am apparently confused.
The issue I'm having is that the div that contains the slide down menu doesn't take up any dimensions (according to Firefox and Chrome's calculated style information) when I put it in the li. If I put it anywhere else on the page it renders PERFECTLY. You can see what I mean from the link. The gray menu looking thing at the top is how it is supposed to render inside the li but doesn't.
<div class="ram">
<div class="gray_middle">
<ul>
<li>Guest Services</li>
<li>Concierge / Local Attractions</li>
<li>East Restaurant</li>
<li>Aquarium Lounge</li>
<li>Health Club</li>
<li>Sandcampers Program</li>
<li>Treasure Chest Gift Shop</li>
</ul>
</div>
<div class="gray_bottom">
<img src="images/top_menu_slidedown_gray_bottom.png" />
</div>
There is a bit of javascript going on that is supposed to find the height of the menu div and set the id of the containing li equal to the height so that it can be referenced later. Doesn't matter...the point is, when the div is in the li, its computed height is 0. When it is outside, it's correct.
Any ideas?
This is driving me absolutely batty. I have never had this many issues with something so simple.
Thanks in advance,
Clif
P.S. I added some HTML comments to the destination so that you can better see what I mean.
Absolutely positioned elements are "outside" of a container and can't really determine its size.
Relatively positioned elements impact container size (and content flow) but then they move elsewhere.
Also, for absolutely and relatively positioned elements, you should always give an explicit X,Y position. This avoids some rendering differences, cross browser.
Anyway, I made the following CSS changes and that submenu seemed to render OK on FF 3.6.4:
For <li id="49"> add: height: 230px; overflow: hidden; .
For div.subMenu add: top: 17px; and delete: bottom:0; .
For gray_middle add: height:160px; top:0; and delete: padding-top:20px; .
When you absolutely position an element, it won't expand the size of it's container to the size required to accommodate it.
EXAMPLE
HTML
<div id="outer"><div id="inner">In</div>Out</div>
CSS
#outer {
background-color: red;
}
#inner {
width: 100px;
position: absolute;
top: 100px;
background-color: blue;
}
See it live here - http://www.jsfiddle.net/r7MgY/86/
Hi clifgriffin Had a quick look at you HTML, shame you didn't give us the CSS aswell, but ... there are a few things I'm not sure on - the header says generator WordPress 2.9.2 but the html does look like "familiar" WordPress. If it is WordPress generated then check the wp_list_pages & wp_list_categories tags you are using. Also I serously recommend an upgrade to WP3.0 as it has MUCH more functionality (custome post/page types etc) plus a "built" in menu function.
I think you may be using too much CSS. Most of what you want to acheive can be done with a lot less.
Guest Services
Concierge / Local Attractions
East Restaurant
Aquarium Lounge
Health Club
Sandcampers Program
Treasure Chest Gift Shop
You can then give the ul an ID (remember ID's need to be unique) this will help with any Java you want to use also add to your ram class with a background image class images/top_menu_slidedown_gray_bottom.png. As you use the ram class again without the image. e.g. <div class="ram backgroundimageclass"> You are then saving a lot of "code" and download times etc.
If you give the ram class the attribute "position: relative;" you can then give the UL id the attribute "position: absolute;" the li's can be styled such as
ul#ID li {line-height 30px; etc ...)
ul#ID li:hover {line-height 30px; etc ...)
ul#ID li:hover a {line-height 30px; etc ...)
and so on.
Ohh forgot ... also why not add this code in the head
<meta http-equiv="X-UA-Compatible" content="chrome=1">
And this just after the tag
<!-- DO NOT REMOVE -->
<!-- THIS SECTION SETS THE LAYOUT FOR GOOGLE CHROME FRAME IF YOU NEED FURTHER INFO LOOK HERE http://code.google.com/chrome/chromeframe/ -->
<!-- Google Chrome Frame is a free plug-in that helps you enjoy modern HTML5 web apps within Internet Explorer. -->
<div id="prompt"><!-- if IE without GCF, prompt goes here --></div>
<script type="text/javascript">
CFInstall.check({
mode: "inline", // the default
node: "prompt"
});
</script>
<!-- END THE LAYOUT FOR GOOGLE CHROME FRAME -->
This allows "detection" of the browser and gives them the option (if not installed) to use Google Chrome Frame, you can:
Start using open web technologies - like the HTML5 canvas tag - right away, even technologies that aren't yet supported in Internet Explorer 6, 7, or 8.
Take advantage of JavaScript performance improvements to make your apps faster and more responsive. Enabling Google Chrome Frame is simple. For most web pages, all you have to do is add a single tag to your pages like above and detect whether your users have installed Google Chrome Frame.
If Google Chrome Frame is not installed, you can direct your users to an installation page.
If Google Chrome Frame is installed, it detects the tag you added and works automatically.
Cliff Just "totally" realised what you are trying to do here - sorry took so long to "twig"
OK you can do this with much more ease than you are trying to do at the moment. All it needs is a little JQuery and some basic CSS. No need to positions absolute etc.
In your CSS use { display: none; } for the class="subMenu" as you know this will "hide" it, I might also be tempted to do the same in your JQuery functions to be "doubly sure". Then in the JQuery create a mouseover effect (mouse over "better" than hover) for the class top_menu_links (I think you could take out the classes "aco" and "white_middle" or at least combine them in the css for the relevant ul) to show the .next('ul); you can slide it etc. Then a mouseout function on the ul. That way the ul stays visable until a mouse out event. I have done this quite successfully on a WP theme to display a "dynamic" list of categories on a mouse over event on a div made to look like a button. Sorry don't have the code to hand but will look later and "pass it over"
In addition you can set the ul background image as the approp. <img src="images/top_menu_slidedown_white_bottom.png" /> (or grey) just by setting it to background position: bottom repeat: none; and a bottom padding the height of the image. No need for alt tags etc.
Sorry been "out for a bit" anyhow here is a code I have used to "recreate" your bottom menu. It doesn't do as you suggest it closes after either a mouseout of the "menu item" or the "submenu". To get it to work on the top menu, just change the position from bottom to top:
$(document).ready(function() {
$('.indexMenu').mouseover(function(){
$(this).children().show();
$(this).children().mouseover(function(){
$(this).children().show();
});
});
$('.indexMenu').mouseout(function(){
$('.sub_menu').hide();
});
});
Here is the "html"
<div class="indexMenu">
Menu 1
<div class="sub_menu">
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
Menu 2
<div class="sub_menu">
Item
<br />
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
<div class="sub_menu">
Menu 3
<br />
Item
<br />
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
Menu 4
<div class="sub_menu">
Item
</div>
</div>
Obviously you can "use" any thing in submenu a ul,ol, etc...
And the "simple CSS
.indexMenu {
position: relative;
bottom: 3px;
width: 240px;
height: 32px;
float: left;
line-height: 30px;
border-top: 2px solid #FFFFFF;
text-align:center;
text-transform:uppercase;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
font-weight: 900;
color:#333333;
}
.sub_menu {
display: none;
position: absolute;
bottom: 33px;
width: 240px;
background-color:#DBF3FD;
opacity:0.8;
filter: alpha(opacity=80);
}
OK I've added a filter in the submenu to have a certain transparency
Gentleman,
Thanks for all of your responses! I'm sorry it took me so long to get back to this post.
This whole issue has revealed a few things I don't yet understand about the way HTML elements are rendered.
I was able to solve this problem by switching the main menu blocks to div elements instead of li elements.
This makes no sense to me in that both are rendered approximately the same way as far as I can tell from looking through the computed styles. But, for whatever reason, once the container is a div the contained divs rendered with their proper dimensions which allowed the rest of my code to work properly. I didn't even have to change the attached CSS!
As the main goal of this project was to finish and make the customer happy, I didn't experiment beyond this finding.
I welcome theories on why this would be.
Thanks again.
Clif