We Keep Coding

Responsive Image Map-Plugin does not work

I have some problems to create responsive image maps with Matt Stows jQuery Plugin. I followed all the advices, but the image maps are still not responsive. I hope you can help. These are the instructions (Full page: https://github.com/stowball/jQuery-rwdImageMaps):
If possible, add correct, unitless width and height attributes to your image map images. You can override these in CSS to make them responsive.
Add a link to jQuery in your page, preferably at the bottom just
before the closing </body>
After jQuery, either in a block or a separate file, call:
$('img[usemap]').rwdImageMaps();
That's my code, I set a fixed width and height which is overwritten in CSS.
<div class="banners">
<img src="wcf/images/blueTemptation/logo2.jpg" style="width: 980px; height: 80px; display:block;" alt="banner-x" usemap="#banner-y" />
<map name="banner-y"><area shape="rect" coords="560,1,765,79" href="http://www.filmfutter.com/" alt="Kgergrfr" title="Filmfutter Startseite">
</div>
at the bottom of my php I placed this:
<script src="https://raw.github.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
In case you wonder, I changed the script source to a URL because I wasn't sure about the right path on my server, but that should not be the issue.

So, I did not manage the plugin to get working and I still wonder because obviously I did nothing wrong, but I used another plugin instead, and finally it works properly. In case some others have the same issues, David Bradshaw's library does exactly what I want and resizes image maps the way they should: https://github.com/davidjbradshaw/imagemap-resizer

I had the same issue, it turns out that I was using JQuery v1.8.3, when I updated it to JQuery v1.9, that seemed to do the trick.
Maybe it's a JQuery versioning problem?

Using JavaScript and CSS to create hovers and onclicks

I have 4 thumbnail images on the bottom of my page with a main, large image above it. I want to be able to click the thumbnail and have it load into the big image. Additionally, I want to be able to hover over the thumbnail and have a black border appear around it.
I have 40 pages that have the exact same setup (4 thumbs, 1 main image) but all different images (products). The thumbs are all in class="bottom-pic".
It seems easy enough, but perhaps I'm wrong. I'm thinking CSS for the hover, JS for the clicking? I'm VERY new to JS.
Here is the source code:
<a href=""img src="images-large/cobra-dark-wood.jpg" alt="" id="main-photo" >
<img src="images-large/cobra-dark-wood.jpg" alt="" name="photo-bottom-one" class="bottom-pic" id="photo-bottom-one">
<img src="images-large/cobra-dark-wood-one.jpg" alt="" id="photo-bottom-two" class="bottom-pic">
<img src="images-large/cobra-black.jpg" alt="" id="photo-bottom-three" class="bottom-pic">
<img src="images-large/cobra-black-one.jpg" alt="" name="photo-bottom-four" class="bottom-pic" id="photo-bottom-four">

Based on your code, and not requiring anchor tags etc, here is the JavaScript you could use.
NB: This examples assumes you are using jQuery
$(document).ready(function() {
$('.bottom-pic').on('click', function(){
$('.bottom-pic').removeClass("active"); //Removes class from all items
$(this).addClass("active"); //Adds class only to the currently clicked on item
$('#main-photo').attr('src', $(this).attr('src')); //Changes the source of the image tag
});
});
To see a working demo, I created this fiddle for you.
http://jsfiddle.net/2ZgjR/
Please note that the images don't match up because they are being dynamically loaded from a server, but the effect is exactly what you're asking for, just use this code with your images!
I also added an "active" style if you want the border to stay on the item you've clicked on. Simply add some CSS to the style .active { }
Hope this helps

Yes, I would use CSS for the border on hover. You may have to use box-sizing: border-box to make sure things don't jump around a bunch.
First, your main image should be something like this:
<a href="whatever_link">
<img src="images-large/cobra-dark-wood.jpg" alt="" id="main-photo">
</a>
Since you're using jQuery, it would be easy enough to get the switch out the source of the main image on click. Something like this:
$('.bottom-pic').on('click', function(){
var imgSrc = $(this).attr('src');
$('#main-photo').attr('src', imgSrc);
});
That's just off the top of my head. I haven't tested it.

Using holder.js to display image thumbnails

I'm trying to display an image usign holder.js but instead of the image the example image is being shown.
<img src='http://upload.wikimedia.org/wikipedia/sr/0/0c/Firefox-logo.png' data- src="holder.js/140x140" alt='Thumbnail' class="img-thumbnail img-responsive"/>
Is this the correct method of using holder.js? Can someone post an example for displaying an image using holder.js?

Not sure why you broke up the data- src like that it should just be:
data-src
I don't see anything else wrong but that.
So to see an example check this out:
http://jsfiddle.net/R22tj/
EDIT
If you wanted to just show the image get rid of the data-src and the image will show up. And if you wanted to specify the height and width you also do that in the HTML. So check out this fiddle. (scroll down on the html section to see the 140x140 image.)
http://jsfiddle.net/jLqd9/1/

Change large image in gallery onmouse over of thumbnails

I currently have a gallery that changes the larger image when the smaller is clicked. Here is the most important code:
.n1:focus span
{
background: url('images/Boot.png')
}
Then
<a class="thumb n1" href=# tabindex=1>
<img src=images/Boot.png><span>
<img src=""><br>Boot</span></a>
I can't figure out how to make this happen onhover or onmouseover.
Here is an example of what I need: http://thelittleappfactory.com/ripit/
Does anyone have any insight? I tried using javascript to open the link onmousehover, but my browser saw it as a popup.

First of all you need to have a thumbnail and a big version of your images. In your code you seem to have a single image. The big images should be hidden with css display:none and absolutely positioned so they will all be on top of each other. I would use jquery's mouseenter and mouseleave events. mouseover event is triggered when the cursor moves over an element and will generate too many calls.
<div class="item n1">
<img class="thumb" src="images/boot_thumb.png" alt="boot/>
<img class="big" src="images/boot_big.png" alt="boot/>
</div>
This javascript code would do the trick:
$('item').mouseenter(function(){
$(this).children('big').fadeIn();
});
$('item').mouseleave(function(){
$(this).children('big').fadeOut();
});

I actually found a way to do this with pure CSS. I thought it was pretty phenominal, because I was told that was impossible and there seems to be need for it. Here's source code for this technique:
http://ostmosis.com/OnHoverChangeImage.zip

Content box on image hover?

I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.

This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )

You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/

Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.

I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.