<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.
Related
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>
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();
I am trying to get an information tag to slide out from behind a circular picture. In order to do this I used a block and circle to create the information field and stuck it behind the image.
The problem I am running into is getting it to slide out smoothly. Since there are two div's, the square slides out and then the circle, causing it to look choppy.
I would like to get it to toggle in and out as if it were one object.
$(document).ready(function(){
$('.employeeBlock').hide();
$('.employeeDot').hide();
$('.employee').click(function(){
$('.employeeDot').toggle('slide');
$('.employeeBlock').toggle('slide');
});
I have tried it with the employeeDot inside the employeeBlock which is in the employee div
as well as both the employeeDot and the employeeBlock seperate and in the employee div.
Both methods give similar results
Thanks
EDIT: Thanks for the replies, it's running smoother, but not quite perfect. I think I need to create one item that is shaped like a bullet, and toggle that in and out. Any ideas on how to do that?
The closest I can get is a pill shape, which leaves some of the area uncovered
EDIT: Here is my html:
<body>
<div class = 'employee'>
<div class = 'employeeDot'></div>
<div class = 'employeeBlock'></div>
<img class = 'pic' src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQfMDb1Qtu7gTDZTfnFR2XcPqrfkn27zeWASTBfczi-GGQAIKG_"/>
</div>
</body>
</html>
And my CSS:
.pic {
height: 150px;
width: 150px;
border-radius: 75px;
position: absolute;
}
>.employeeBlock {
background-color:maroon;
height: 150px;
width: 150px;
position: absolute;
left: 75px;
float: left;
}
>.employeeDot {
background-color: maroon;
height: 150px;
width: 250px;
border-radius: 150px;
position: absolute;
float: left;
left: 75px;
}
You can specify any number of selectors to combine into a single result:
$('.employeeDot, .employeeBlock').toggle('slide');
Multiple Selector
.toggle(); is deprecated, use .slideToggle(); instead.
Slide down:
$(document).ready(function(){
$('.employeeDot','.employeeBlock').hide();
$('.employee').on("click", function(){
$('.employeeDot, .employeeBlock').slideToggle('fast');
});
});
Slide from side:
$(document).ready(function(){
$('.employeeDot','.employeeBlock').hide();
$('.employee').on("click", function(){
$('.employeeDot, .employeeBlock').animate({width: 'toggle'});
});
});
The rest of the answers have covered everything, but to get the element to shape like a bullet use:
border-radius: 10px 10px 0 0;
But match the size and sides to your likings.
try this.
$(document).ready(function(){
$('.employeeBlock,.employeeDot').hide();
$('.employee').click(function(){
$('.employeeDot, .employeeBlock').toggle('slide');});
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;
}
What I want to do is to show the top photo (which is set to visibility: hidden) on hover. I have two photos positioned on each other like this:
<div class="frame">
<img src="./img/portfolio/default1.jpg" width="300" height="178" alt="Title Here"></a>
<div class="boxwrapper" style="visibility: hidden;"></div>
</div>
Added the second photo through css:
.boxwrapper {
background: url("../img/boxPlus.gif");
position: relative;
width: 300px;
height: 178px;
left: -6px;
top: -184px;
z-index: 1000;
}
Is it possible to do with css? Tried (and several more options):
#frame img:hover .boxwrapper {
visibility: visible;
}
But it is not working. Or this is only possible with javascript? If yes, please give some tips as I am not too much of javascript guy. Thanks!
You could set the photo as background of the boxwrapper
.boxwrapper{
background: url("../img/boxPlus.gif");
}
.boxwrapper:hover{
background: url("../img/portfolio/default1.jpg");
}
if this is not possible you could add it as background trough a style attribute inside your html
<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div>
You'd have to put the :hover class on a parent container. CSS does not allow such things to trickle "up" the tree, only down.
.boxwrapper {
display: none;
}
.frame:hover .boxwrapper {
display: block;
}