I have an Image in a HTML page. I want to display different information when the mouse is hovering over different areas of that image. For example, I want to display information-1 when the mouse is over point-1 on the image. And when leaving i want the information-1 to hide and when the mouse is hovering over point-2 i want to popup information-2. Is this possible with JS using any kind of library?
Yes It's possible.
You can approach in 2 ways:
Image Maps - Just a link with a tutorial
Use CSS to positionate transparent elements above the image and show some text when one of this is hovered.
I made this pen to show you an example with method 2. With method 1 is kinda the same, you just need to change a little bit the code.
HTML
<div class="img-wrapper">
<img src="http://i.imgur.com/ZY0gdtF.jpg" alt="">
<div class="cloud">
<p>Hey a cloud!</p>
</div>
<div class="tree">
<p>Tree here</p>
</div>
<div class="grass">
<p>Green Grass</p>
</div>
</div>
JS
$('.cloud, .grass, .tree').hover(function(){
$(this).find('p').show();
}, function(){
$(this).find('p').hide();
});
Of course all of this is just a sample.
While the first method allows you to define a shape, the second doesn't.
Using method 1 will let you define more accurate areas, but it can be hard. Method 2 is simplier but less accurate. Your needs, your choice.
Related
Been trying to find a solution to this but usually all methods involve mouse-hovering or mouse-clicking on the image itself rather than a hyperlink to swap the two images - or having to click on 4 separate links to view 4 different images for example.
<div id="aboutus">
<a href="#>More about us...</a>
<img id="introimage" src="images/img1.jpg" style="display:block">
<img id="introimage" src="images/img2.png" style="display:none"/>
</div>
Simply put I would like the 'More About Us' link to swap the display for the images when clicked - or any other method that would let me swap the two images on each click.
As I said in the comments, you should change the IDs so they're unique or make them classes (as I have done in this example).
HTML
<div id="aboutus">
More about us...
<img class="introimage" src="images/img1.jpg" style="display:block">
<img class="introimage" src="images/img2.png" style="display:none"/>
</div>
Javascript
$(function() {
$("a.introimagetoggle").on("click", function(event) {
event.preventDefault();
$("img.introimage").toggle();
});
});
You could mess about checking which image is visible and then setting the display state of each of them according to that, but toggle is simple and will suit this particular instance.
Hey I'm looking for some help - I'm more of a designer than a coder but I am trying to learn :)
I do have this kinda working but I can't figure out how to get the thumbnail image to resize to the height of the expanded div - as it expands.
I have a container div and inside that div I have multiple "expandable" divs which contain information about different products.
Each of these expandable divs has a title, a thumbnail image and a price of the product (as well as a plus sign image to expand the div itself).
When the div is expanded there is some more information about the product on show.
But when the div is expanded, I would also like the "price" to disappear (as it's now visible in the expanded information) and I would like the image to automatically scale to the height of the expanded div.
So the product information will be on the on the left hand side of the div and the image will be taking up the right half of the div (with the minus button on top of it.
This is my html
<div class="expandingContentContainer">
<div class="expandingContent">
<div id="expandingContentHeader" style="display:inline; float:left">
<h4>Portable navigation system</h4>
</div>
<div id="expandingContentThumb" style="display:inline;">
<img src="images/thumbnails/audio-portable-navigation-thumbs.jpg" />
</div>
<div id="expandingContentPrice" style="display:inline;">
<img src="images/assets/icon_pound.png" />Price: £200
</div>
<div id="expanderSign">
<img src="images/assets/icon_plus.png" />
</div>
<div id="expanderContent" style="display:none">
<p>Bluetooth voice dialling without the hassle of having to train the device. Reads text messages out loud and features a stylish 2,8" colour display. Play back music and phone calls via the OE-audio system.</p>
<p><img src="images/assets/icon_pound.png" />Price: £200</p>
<p><img src="images/assets/icon_tick.png" />Availability: Most models<img src="images/assets/icon_hash.png" />Part Number: 3600-78-474<img src="images/assets/icon_pencil.png" />Legal: N/A</p>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#expanderSign").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").name("−")
}
else {
$("#expanderSign").text("+")
}
});
});
</script>
Sounds like something you could solve entirely with CSS. As long as the container-div has a fixed height, you should be able to set the height of the img-element to height: 100%, causing the image to scale accordingly. However, this will not work while the display-mode of the container is set to display: inline. You will have to use display: inline-block to be able to set the height of the div.
In order to get a good help you should add a link to your website or the css files.
You will need some changes in the css and maybe (depending on the support you need) some javascript (jquery or zepto).
You could also use a pre build library but it's really not necessary.
I am trying to locate javascript code that, when I rollover an image, will make a box appear below the image and expand down (much like how a movie screen in a theater would roll from the ceiling to the floor). In that box, content would also appear, that I have previously added, that describes the image above. Already existing underneath the image I have a div with content in it...I would also like this div to be pushed down as the box described above expands down.
Any suggestions?
Thank you very much in advance!
C*
Forgot the code that I am using...so what is happening here is that I have a picture, and below it, a small box, that when I rollover that small box it changes color. So, I want to add, when I scroll over that small box, not only does it still change color, but the new vertical expanding box appears below it. I have javascript in a *.js file that handles the already existing rollover effect but it's quite long and I wasn't sure if I should add that (it was create by Dreamweaver when I created a rollover image).
<div class="images">
<figure class="images">
<img src="../images/Flower2.jpg" width="300" height="199" alt="Life">
</figure>
<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../graphics/life2.jpg',4)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image3" /></a>
</figcaption>
</div>
You don't give much information in your question about your current setup, but assuming that you have your HTML set out something like this:
<div>
<img id="tux" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" />
<div id="tux_desc" class="imgDesc" style="display: none">
<p>A cute penguin!</p>
</div>
</div>
<div>
<p>This text is part of the normal document flow</p>
</div>
Then you can use the following JavaScript (which makes use of jQuery):
$('#tux').hover(
function() {
$('#tux_desc').slideDown();
},
function() {
$('#tux_desc').slideUp();
});
You can see it working here: http://jsfiddle.net/wbAxm/1
something like this ought to to do it as long as the div to expand is directly after the image in the mark-up:
$(".class_for_images").on("mouseenter mouseleave", function() {
var content = $(this).next();
if (content.is(":visible")) {
content.slideUp();
} else {
content.slideDown();
}
});
If you want more than this, or it doesn't work, you'll need to post some code so that we can provide more detailed answers...
I realize I'm still pretty new here, but I have a static image (Google Map but not using Google API yet) in which I have created hotspots which will pull up location data that lives in a table to the left of the map. When a hotspot is clicked on, however, the page scrolls down so that the top of the map (the image map) is at the top of the screen even though the information is directly beside the map.
I am assuming this is because the anchor is seeking to load at the top of the screen. This would be okay except that my header is now pushed out of the screen. Is there a way for the page to not "move" when the hotspot is clicked?
The page can be seen here: http://www.mydillonsupply.com/default.aspx?page=customer&file=customer/disupp/customerpages/locations_page.htm
Instead of using the default browser behavior (for anchor tags) just block it, and scroll the box yourself. I can see you are already using jQuery. So something like this ought to do the trick.
$('area').bind('click', function(e) {
e.preventDefault();
// the div in question has nothing uniquely identifiable as it is now,
// assign it a unqie class or id so you can select it
var findAnchor=this.href.split('#')[1];
$('#the_div').scrollTop($('a[name="' + findAnchor+'"]').next().position().top);
});
It's kinda hard to test in the context of that page, but if you set up a fiddle with just that part of it I am sure this could be made to work right pretty easily.
(edit) - OP set up a fiddle with the problem, updated version here:
http://jsfiddle.net/H3Mz6/9/
The code above has been updated to reflect what actually works. I also added the id "the_div" to the div surrounding the table of locations. Here's how it works:
1) get the part of the href after the # - the browser may add the full url.
2) find it, then get the next() element, because the invisible anchor tags will report that they have no location information
3) then get the position().top value which is the postion of that element relative to it's container
4) then scrollTop(..) to it
Contrary to #colinross's suggestion, there's nothing that's either non-extensible nor inflexible about imagemaps. Quite the opposite, they are the only way you can have irregularly shaped hotspots without going to a heck of a lot of trouble, and that gives you a lot of power. All you need to do to make them do whatever you want is bind your own mouseover and/or click events to the areas, and call e.preventDefault(). It's all yours from there.
Yes, I like image maps, and I also wrote a plugin that does a heck of a lot with them. So I am fairly biased. But I am surprised by the trouble people go to in order to avoid them (like absolutely positioning anchor links, complex css, and so on) when they're dead simple, easy to use, work with every browser under the sun, and are far more powerful than positioning all your hotspots by hand. (And without an imagemap, or some crazy logic to figure out where the mouse is on your own, you're limited to rectangular areas anyway!).
The jump is happening because you are using an image map that is processing a click to the location #DillonLocationsMap.
It is the same result as having an in-page anchor like <a name="over_here" /> and a link elsewhere of Go over here.
I would suggest you don't use an image map to be honest and they are not very extensible nor configurable.
give the fish answer
Move the actual <map> element up, to for instance before the table#MainTable element. It will still technically jump, but your header should still be in view.
p.s. Tables for page-layout makes pandas cry ;(
When you click on the link, your <a name="Nashville"></a> tag relating to said city end up scrolling to the top of your <!-- table containing locations -->.
Subsequently, this will work the exact same way as with a "Top" link where you place an <a name="TOP"></a> at the top of your page and then a Back to top at the bottom of your page. It will try to put the <a name="Nashville"> as close to the top of the viewport as possible (example: http://mix26.com/demo/local_scroll/index.html).
You could try something like this (found here):
<html>
<head>
<title>Document Title</title>
<script type="text/javascript" language="javaScript">
<!--
function go_anchor(n){
document.getElementById("div1").scrollTop = document.getElementById(n).offsetTop
}
// -->
</script>
</head>
<body>
To anchor 1<br />
To anchor 2<br />
To anchor 3<br />
To anchor 4<br />
<div id="div1" style="position:absolute; left:30; top:100; width:330; height:200; clip:rect(0,330,200,0); overflow:auto; padding:5;border:2px solid black">
<p>To anchor 1</p>
<p>Dummy Text 2</p>
<p>Dummy Text 3</p>
<p>Dummy Text 4</p>
<p>Dummy Text 5</p>
<p>Dummy Text 6</p>
<p>Dummy Text 7</p>
<p><span id="sp1">Anchor 1</span></p>
<p>Dummy Text 9</p>
<p>Dummy Text 10</p>
<p>Dummy Text 11</p>
<p>Dummy Text 12</p>
<br/><br/><br/><br/><br/>
<span id="sp2">Anchor 2</span>
<br/><br/><br/><br/><br/>
<span id="sp3">Anchor 3</span>
<br/><br/><br/><br/><br/>
<span id="sp4">Anchor 4</span>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
The End
</div>
</body>
</html>
I am trying to have tooltip for my personal website http://www.stacked.in. when I move the mouse on the link, I want to have tooltip displayed. Tooltip display content is already available inside the html page as a div element, but it is hidden. I want the tool-tip to be displayed only when I move the mouse over the link. I use jquery and jquery plug-in
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ for this purpose. Even if I get the some other jquery-plugin, I would be happy.
Please note that tooltip-content div inner html would not shown. Tooltip supposed to get the element and display it.
#tooltip-content {
display:none;
width:250px;
}
here is HTML code..
<div id="widget" class="span-8 " >
<h2>Example.com</h2>
<ul>
<li><h3>Example News 1</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 1 shown only on tooltip..
</div>
</div>
</li>
<li><h3>Example News 2</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 2 shown only on tooltip..
</div>
</div>
</li>
</ul>
There would be more than 100 elements requires tooltip. Any better tool or way to handle this problem? If you give me the code sample, I would be greatful to you.. I already searched so many ways of doing it. http://code.google.com/p/jquery-very-simple-tooltip/ comes near to solution but it requires initialization for all the tooltip notes.
I've found jQuery Tools from http://flowplayer.org/tools/tooltip/index.html to have an excellent tooltip. You can use either a title attribute on the element, or use the next DOM node as the tooltip for a non-titled element.
Very flexible, and I'm sure it'll suit your needs appropriately. Good luck!