Develop Reference

Multiple Images coming from one image

I am designing a webpage and want multiple images coming from one image using Javascript, CSS or Jquery whatever is required.
<img src="main.png" >
<img src="submain1.png" >
<img src="submain2.png" >
<img src="submain3.png" >
I am new to javascript and so it's getting difficult to solve it.
main.png is the main image and I want submain1.png, submain2.png, submain3.png images to come from the main.png one after the other as soon as the page loads.

As others have suggested, we think you are asking about sprite sheets. Now that you know a more common term for what you might be after you could try some searches. There are lots of CSS sprite issues on this site:
CSS Sprite Issues On StackOverflow
This is a quick demo:
#full { width: 389px; height: 186px; }
#window1 { background-position: 369px -11px; }
#window2 { background-position: 194px -91px; }
.iconback {
border: solid 1px;
background-image: url(http://www.icons-land.com/images/products/VistaPlayStopPauseIcons.jpg);
}
.window { width: 80px; height: 80px; margin: 1em; }
<div id="full" class="iconback"></div>
<div id="window1" class="iconback window"></div>
<div id="window2" class="iconback window"></div>

Simple css not working in Iceweasel 31.2

So I am making a website for a relative, I have made a which isn't displayed at first (display : none) and fades in when the user click somewhere on the page.
It works very well with Chromium, but when I try with Iceweasel 31.2 the CSS for the part of the page that is supposed to fade-in doesn't load.
The javascript function that is called upon clicking the button :
var openGallery = function(){
$('section, nav, #topleft').fadeOut(400);
$('#gallerie').toggle();
}
This is the CSS involved
#gallerie
{
position: relative;
height: 874px;
width: 1152px;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
margin: auto;
text-align: center;
}
#gallerie img:first-of-type
{
max-width: 1100px;
max-height: 720px;
display: block;
margin-left: auto;
margin-right: auto;
}
.close
{
display: inline-block;
position: absolute;
right: 5px;
top: 5px;
}
.left, .right
{
position: static;
top: 746px;
}
And finally, the HTML that fades in/out (note that the JS part of it comes from some PHP)
<div id="gallerie">
<script type="text/javascript">
var collection = [
// "FILENAME" | "NAME" | WIDTH | HEIGHT
["6ème arrondissement-73 X 60.JPG","6ème arrondissement",1535,1832],
(more data...)
["Sur la neige-55 X 46.JPG","Sur la neige",1853,1562]
]
</script>
<h3>Gallerie</h3>
<figure>
<img src="data/tableaux/6ème arrondissement-73 X 60.JPG" class="big" title="6ème arrondissement" alt="0">
<figcaption>6ème arrondissement</figcaption>
<img src="images/left.png" alt="left" class="left" title="left"><img src="images/right.png" alt="right" class="right" title="right">
</figure>
<img src="images/close.png" class="close" title="Fermer la fenetre">
</div>
I really don't know where the bug might come from. Thanks for helping me out.

Personally, I would use JQuery to toggle through the class events and use those to do the transitions etc. Right now, CSS3 is pretty good across browsers.
Instead of:
$('section, nav, #topleft').fadeOut(400);
I would add CSS that handles the fade with a transition.
Check out the pen I made here to see the effect. You can add toggleClass(); addClass(); or removeClass(); should you choose.
http://codepen.io/brycesnyder/pen/LEPJZg
EDIT: .toggle(); will cause a stupid effect, I meant .toggleClass();

New image when hovering on link

<div id="social-links">
<div><img src="pictures/facenh.png"/></div>
<div> <img src="pictures/twitternh.png" /></div>
<div> <img src="pictures/ytnh.png" /></div>
<div> <img src="pictures/mailnh.png" /> </div>
</div>
This is the code I'm using. The thing I want to do is to make another image appear when hovering over the image/link. I'm not sure how to do it, so i would love some help please.
#social-links {
float: left;
width: 100px;
height: 500px;
margin-left: -20px;
}
If you need to know the css for social-links, it's right there. All i want to do is to make another image appear when hovering over the links/the images. Perhaps Javascript is needed?

No JavaScript required, you can just use CSS.
It's not great practice to use images for links as search engines won't read them or get any context from them. Much better to have a text link that you replace with an image in the CSS - e.g.
<div id="social-links">
<div><span>Facebook</span></div>
...
</div>
Then, in your CSS, simply hide the text, and replace with image for both standard and hover.
#social-links {
float: left;
width: 100px;
height: 500px;
margin-left: -20px;
}
#social-links a span {
display: none;
}
#facebookLink {
display: block;
background: url('path-to-facebook-image.jpg');
width: 50px;
height: 50px;
}
#facebookLink:hover {
background: url('path-to-facebook-hover-image.jpg');
}

Here is a jQuery solution. Fiddle Here.
$("#facebook").hover( function () {
$(this).find("img").attr('src', "http://placehold.it/150x150/ff0000/000000");
}, function () {
$(this).find("img").attr('src', 'http://placehold.it/150x150');
});
I really think this Link from #talemyn is what you are looking for also. Either way should get the job done.

Align Jcrop images

I've this code:
<div class='mini'>
<div id='wrap_jcrop' class='td_wrap'>
<img id='img2crop' src=''>
</div>
</div>
With this CSS:
div.mini {
width: 300px;
height: 200px;
display: table;
}
div.td_wrap {
display: table-cell;
vertical-align: middle;
text-align: center;
}
The image source for img2crop is loaded dynamically and handled with a Jcrop api. But Jcrop aligns the image on the left.
How can I align the image in the center of the div?

Rather than modify the jcrop css file (not recommended, as per the plugin author) you can add a class to the jcrop-holder element as an option when you initialise Jcrop:
jQuery(function($) {
$('#jcrop_target').Jcrop({
addClass: 'jcrop-centered'
});
});
Add a wrapper around the img tag in your HTML, e.g.
<div class="crop-image-wrapper">
<img id="jcrop_target" src="...." alt="" />
</div>
Then add a css style, e.g.
.jcrop-centered
{
display: inline-block;
}
.crop-image-wrapper
{
text-align: center;
}
Tested in Chrome 31.0.1650.63 m - let me know if it doesn't work in other browsers? (except < IE8) :-)

Set
.jcrop-holder
{
margin: 0 auto;
}

Try margin: 0 auto;, position: relative;, float: left;.

The only thing that worked for me:
JS:
$("#img2crop").attr("src", resp).load(function(){
$("#wrap_jcrop").width(this.width);
$("#wrap_jcrop").height(this.height);
$("#wrap_jcrop").css("position", "absolute");
$("#wrap_jcrop").css("top", ($("#wrap_jcrop").parent().height() - $(this).height())/2 + "px");
$("#wrap_jcrop").css("left", ($("#wrap_jcrop").parent().width() - $(this).width())/2 + "px");
$('#img2crop').Jcrop();
});
CSS:
.mini {
position: relative;
}

Jquery Cycle plugin: first image appears floating right

I have installed the JQuery Cycle Plugin on my site and it works fine but for the first image which appears floating off to the right when the page loads. This just happens to the first image - all others are ok.
I am not sure why this is occurring as all my code is very simple:
$(function() {
$('#banner').cycle('fade');
});
<div id="banner">
<img src="images/banner01.jpg" />
<img src="images/banner02.jpg" />
<img src="images/banner03.jpg" />
<img src="images/banner04.jpg" />
<img src="images/banner05.jpg" />
</div>
#banner
{
width: 750px;
text-align: center;
height: 370px;
margin: auto;
margin-top: 20px;
}
#banner IMG
{
width: 750px;
height: 320px;
}
I am not sure what I have done wrong or what I can do to fix it. Would anyone know?
The site is here if you want to look: http://austin7.org.au/
EDIT: I have tried moving the JQuery script to the bottom of the page too, to no affect. Also, I have tried using different images - they all have the same result.

Set the left to 0.
#banner img{
left: 0;
}