I need a menu consisting of images and the images should change when someone hover around it.
HTML
<div id="menu" >
<img src="images/about.png" alt="logo" />
</div>
CSS
#menu {
margin-left : 353px;
margin-top : -70px;
padding-bottom : 16px;
}
#home {
background : transparent url(images/about.png);
z-index : 1;
}
#home:hover {
background : url(images/aboutR.png);
z-index : 2;
}
The problem I am facing is that when I hover around the menu item, the image to be displayed on hover is displayed at the back of the old image. Moreover, the hover background image displayed is very small in width and height. Please help out. Thanks
As previously stated, no need for a JS solution.
Another way of doing it is by loading both images and hiding/showing them with the :hover event. Something like this:
HTML:
<a id="home"><img class="image_on" src="images/about.png" alt="logo" /><img class="image_off" src="images/aboutR.png" alt="logo" /></a>
CSS:
.image_off, #home:hover .image_on{
display:none
}
.image_on, #home:hover .image_off{
display:block
}
Here is a js/jquery solution
//should go inside your <head> tag
function onHover()
{
$("#menuImg").attr('src', 'images/aboutR.png');
}
function offHover()
{
$("#menuImg").attr('src', 'images/about.png');
}
html:
<div id="menu" >
<a href="#" id="home">
<img id="menuImg" src="images/about.png" alt="logo" onmouseover="onHover();"
onmouseout="offHover();" />
</a>
</div>
Here is a working example. Happy coding :)
Place this code just before the closing body tag,
<script type='text/javascript'>
$(document).ready(function(){
$(".home").hover(
function() {$(this).attr("src","images/aboutR.png");},
function() {$(this).attr("src","images/about.png");
});
});
</script>
place the class home in the img tag. Done. Works perfectly.
This works:
<html>
<head>
<title>Example</title>
<style type="text/css">
#menu {
width: 400px;
height: 142px;
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#menu:hover {
background: url(lPr4mOr.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="menu">
<img src="lPr4m.png" alt="logo" />
</div>
</body>
</html>
(Image names changed for my convenience making the page.)
Remove the img tag, and set the width and height of #home (and any other menu item) to the width and height of the images.
Also, set the content to whatever the alt of the image would be (for accessibility purposes), and then set the text-indent property so it's moved offpage.
Currently, when you hover, it's changing the background image, but the img tag is on top, and it always will be.
HTML
<div id="menu" >
Home
</div>
CSS
#menu{
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#home{
background:transparent url(images/about.png);
width: 400px;
height: 142px;
z-index:1;
text-indent: -9999em;
}
#home:hover{
background:url(images/aboutR.png);
z-index:2;
}
you could do a:hover img{display:none} which would get rid of the img, idk about size issue bc you didnt specify the sizes. if i were you i'd either ditch the img element, use it as background-image for a element, then change it on :hover. or if you want the img element, use the clip property following the same principles as above
You're calling <img src="images/about.png" alt="logo" /> twice, once in the html and once in the css. I suggest deleting the html and strictly using css background image. You don't need the z-index either.
you need to use position rule while using a z-index rule. Try adding position:relative where you used z-index.
are you just trying to make a simple image rollover? without seeing a working example i can't make out exactly what you're trying to do, but image rollovers are simple to do with CSS sprites, no jquery needed and this makes for a much more bulletproof website. it also makes your website respond faster because the default and over state images are the same image, no preload code necessary.
if you need a mapped image (rather than a full swap out) this can be accomplished with a background image, a container div and png-24 graphics (javascript required to make png-24s work in IE6, but who cares about supporting IE6 anymore anyway?).
a good way to change out nav images without resorting to javascript is by using the background-position property, like so:
// define your container element
#nav-home {
margin: 20px 5px;
height: 15px;
width: 40px;
}
// use a descendant selector to style the <a> tag
#nav-home a {
background-image: url("/images/buttons-nav.gif");
display: block; // THIS IS VERY IMPORTANT!!
background-position: 0 0; // the first number is horizontal placement, the second is vertical placement. at 0 0 it is positioned from the top left corner
height: 15px;
}
// this is where you change the position of the background for the hover state
#nav-home a:hover {
background-position: -20px 0; //this moved it 20px to the right
}
and your html code would look like this:
<div id="nav-home"><img src="/images/transparent.gif" alt="home" height="100%" width="100%;">
<!-- uses a 1px transparent gif to "hold" the place of the actual clicked item -->
your image would actually contain BOTH on and off states, like this: http://www.w3schools.com/css/img_navsprites_hover.gif then all you are doing is moving the image to one side to show the :hover state. (code example at http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav). you are basically making a window with a container div, then only showing a portion of the actual background image.
also, stay away from using :hover on anything but an tag as not all browsers support use of :hover on block level elements.
And now for the simple way:
<img id=logo src=img1.png onmouseover=logo.src='img2.png' onmouseout=logo.src='img1.png'>
This HTML will change the image to a new picture on mouse over and turn it back to the first picture on mouse out.
Related
I'm working on a site that has all of its pages basically "slide" around on the main landing page. So you basically start on a div with an ID of "main" that also has a class of "currentpage." If you click a nav menu item, the content slides away, and the next page's content slides into place. This new content's primary div would have a new id (let's say #about), and now the "currentpage" class is added to this div as well.
The thing is, the body tag has a background-image attached to it (it used to have a full screen video, but I set that to hide, and then there's this bg image behind it). I'd like to change the background image depending on which "page" you are on. At first, I set it up so that #about had a background-image set up, and so forth for the rest of the page IDs. The thing about this is that the content of the primary div is padded a whole bunch, so you would see the specified #about background image, but then you'd actually also still see that original image from the body tag behind it.
Thus, I'd like to change the actual body tag's background image property depending on which ID you're on.
I figured some means of checking if you're on a specified ID, as well as if the class for that div is set to "currentpage" would be step 1, with step 2 then changing the background image if that condition is true.
Here is what I have tried so far, to no avail:
Attempt 1:
if ($this.is('#about')) {
$('.bgimage').css({"background":"url(imageurlhere)"});
}
This didn't do anything.
Next, I found this old SO thread and tried to modify it just to see it in action to know if I was on the right path. Here's what I used:
Attempt 2:
if ($("#about").hasClass("currentpage")) {
$('#about').css({"background-color":"red"});
}
Unfortunately, this also didn't cause anything differently) when I went to About.
And yes, I had cleared cache out each time, and manually even went to the JS file to ensure it had the new code blocks each time.
Edit
Here is the basic page format:
<body class="video">
<div class="preload">Whole lot of stuff in here for a preload overlay</div>
<nav>Nav is here</nav>
<main>
<div id="pt-main" class="pt-perspective ">
<div class="page-1 currentpage" id="main"></div>
<div class="page-2" id="about"></div>
<div class="page-3" id="services"></div>
<div class="page-4" id="portfolio"></div>
<div class="page-5" id="contact"></div>
</div>
</main>
The "currentpage" class will go to a different div if the corresponding link in the nav is clicked. So, click About in the nav, currentpage class drops from #main and ends up in same div as #about
And then the CSS for the body tag is as follows:
.video {
background: url(../img/video_bg.jpg);
background-size: cover;
}
I basically want to make it so that background (image) of .video changes when you end up on #about, #services, #portfolio, etc.
TL;DR
Can anyone help me with this code block? How do I check if an div with a specific ID also has a class, and then modify the .bgimage CSS to change its background?
Edit 2:
I came up with a workaround for this. Here's what I did:
1) I set the overall background color to #000, removed the original bg-image altogether, and actually restored a full-screen video I'd previously hid
2) I edited each nav menu item to have a hidevid class, except for the Home link, which I made showvid
3) I created CSS for each "page" ID (ie #about {background-image: url(image);}
4) I created a new CSS class: .hidethis {display: none;}
5) I then implemented the following jquery:
$(document).ready(function(){
$(".hidevid").click(function(){
$("video").addClass("hidethis");
});
$(".showvid").click(function(){
$("video").removeClass("hidethis");
});
});
What this does is set the background to black, but that's not seen on the landing ("home") page, just the video. However, clicking a nav menu item will "slide" the next "page" into view, displaying its background image and changing the video to have a display: none property, basically hiding it and the extra content (the nav) just has a black background behind it.
Using vanilla JavaScript (pure JavaScript), you can check if a div has a particular class name and based on the results, change the css by doing this:
var x = document.getElementById('about');
var y = document.querySelector('.bgimage');
if (x.classList.contains('currentpage')){ // if #about has "currentpage" class, run the following
x.style.background = 'red'; //change background-color of #about to red
y.style.background = 'url(imageurlhere)'; // change background-image of .bgimage
}
jsFiddle: http://jsfiddle.net/AndrewL64/nqjypevh/10/
your codes is wrong. true usage is this.
css('background-color','red')
I came up with a workaround for this. Here's what I did:
1) I set the overall background color to #000, removed the original bg-image altogether, and actually restored a full-screen video I'd previously hid
2) I edited each nav menu item to have a hidevid class, except for the Home link, which I made showvid
3) I created CSS for each "page" ID (ie #about {background-image: url(image);}
4) I created a new CSS class: .hidethis {display: none;}
5) I then implemented the following jquery:
$(document).ready(function(){
$(".hidevid").click(function(){
$("video").addClass("hidethis");
});
$(".showvid").click(function(){
$("video").removeClass("hidethis");
});
});
What this does is set the background to black, but that's not seen on the landing ("home") page, just the video. However, clicking a nav menu item will "slide" the next "page" into view, displaying its background image and changing the video to have a display: none property, basically hiding it and the extra content (the nav) just has a black background behind it.
I’m making a whole lot of assumptions and guesses. You only showed one css class. From the description it sounds like the problem is actually using CSS to cover the background, and that if it weren’t for that, there would be no need to change the class on the body. The basic solution, move the initial background from the body to the #main div, move the padding to the .page-1, .page-2 etc. divs. Also, if the background images are transparent also give a background-color.
I’m assuming the nav does not have a background image and stays put. I’m also assuming you already have the sliding of the sections in place, I didn’t show that but instead just a simple display none/block just to keep it simple. I also didn’t show the js (but you shouldn’t need to change the body class.) I also left the html alone.
body {
margin: 0;
height: 100%;
}
nav {
height: 50px;
background-color: #ccc;
}
main {
background-image: url(https://picsum.photos/200/300?image=0);
background-size: cover;
}
.pt-perspective > div {
height: calc(100vh - 50px);
padding: 50px;
background-repeat: no-repeat;
background-color: aqua;
background-size: cover;
background-image: url(https://picsum.photos/200/300?image=0);
display: none; /* or positioned off screen, wherever you already have it */
}
.pt-perspective .currentpage {
display: block;
}
.pt-perspective .page-1 {
background-image: url(https://picsum.photos/800?image=1);
}
.pt-perspective .page-2 {
background-image: url(https://picsum.photos/800?image=2);
}
.pt-perspective .page-3 {
background-image: url(https://picsum.photos/800?image3);
}
.pt-perspective .page-4 {
background-image: url(https://picsum.photos/800?image=4);
}
.pt-perspective .page-5 {
background-image: url(https://picsum.photos/600?image=5);
}
<body class="video">
<!-- <div class="preload">Whole lot of stuff in here for a preload overlay</div> -->
<nav>Nav is here</nav>
<main>
<div id="pt-main" class="pt-perspective ">
<div class="page-1 currentpage" id="main"></div>
<div class="page-2" id="about"></div>
<div class="page-3" id="services"></div>
<div class="page-4" id="portfolio"></div>
<div class="page-5" id="contact"></div>
</div>
</main>
Prequel: I am using Bootstrap Carousel . Since I want to use background-size: cover, I am using a div with background-image set, instead of the default .
The issue: For some reason, the carousel doesn't seem to preload the next image. When I click next image, I can see the image being downloaded. Unfortunately, I think because of this lack of preloading the images aren't getting the right size (Set by JS) in some browsers:
Anyway to make it preload all the images in the carousel?
This seems to work great. Just place this with your images in the url() outside of the carousel.
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
Credit:
http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
Create a class for e.g. .preload hide it using display: none; as it will not only hide element but also remove its impression on page(height/padding/margin/etc).
after that create div with .preload class.
<div class="preload"></div> below <body> tag. That will force it and its child elements to get loaded before anything below gets loaded.
Now you can add your images using tag into the div and it will load initially but won't display in preload div.
Refer below code for better understanding:
CSS: .preload{ display: none; }
HTML
<div class="preload">
<img src="preload-this-img-1.jpg" />
<img src="preload-this-img-2.jpg" />
<img src="preload-this-img-3.jpg" />
</div>
Note: Search engines may not be happy with loading one image two times and not using alt="" in image tag, I will update with solution for it, if found
i want to go to this image using jquery or javascript and then on hover the image change the href attrb to another src image
this is the code :
<a href="Sign-Up.aspx" ><img alt="Login" src="images/login3.png" style="width: 173px; margin-top: 0px; z-index:10;" /></a>
First, let's give ourselves a way of identifying this anchor/image combo from anything else in your page:
<a class="button" href="Sign-Up.aspx" ><img alt="Login"
src="images/login3.png"
style="width: 173px; margin-top: 0px; z-index:10;" /></a>
Then let's write some jQuery to swap the images:
$('a.button img').mouseover(
function() { $(this).attr('src', 'images/login3_hover.png'); }
);
$('a.button img').mouseout(
function() { $(this).attr('src', 'images/login3.png'); }
);
The second bit ensuring we get back to the original state when not hovering.
However you don't actually need Javascript for this; you can instead do it using just CSS and HTML. To achieve this you have to separate the text and the image of the link. Something like the following HTML:
<a class='button' href="Sign-Up.aspx"><b>Login</b></a>
with some CSS:
a.button {
width: 173px;
height: 73px; // or whatever your image height is
position: relative;
background-image: url("images/login3.png");
background-position: top left;
background-repeat: no-repeat;
display: block;
}
a.button:hover {
background-image: url("images/login3_hover.png");
}
a.button b {
position: absolute;
left: -9999px;
}
(I've omitted the margin-top and z-index rules, since they're presumably dependent on other things going on in your page.)
What we're doing there is attaching the image to the anchor as a CSS background image, and then changing it when we're hovering over that anchor. The text (which was previously in the alt attribute for the image) is then styled so that it doesn't show (but is still available for search engines and accessibility tools).
There's still a problem with both those solutions, however, because the images/login3_hover.png image won't be loaded before you hover, so you'll get a brief flash of whatever the background colour behind the anchor is while it loads. To solve this, you need to use CSS sprites, which builds on the background-image technique above.
Add an id to your image tag, E.G id="image", then add this javascript
<script type="text/javascript">
$(function(){
$('#image').hover(function(){
$(this).attr('src', 'images/new_image.png');
});
});
I have an image (in the top left as a home link), and I use the CSS :hover to change the image upon rollover.
The problem is, the image takes time to load the first time I rollover it. There's a temporary blank space, and you see the image incrementally load. It takes about a second, but it's annoying.
How can I fix this so the rollover is seamless? Is there a way to preload the image?
There's two options I can think of, off-hand:
css image sprites, or
placing the :hover image in a hidden div elsewhere in the page.
1, sprites:
For a CSS Sprite, have one background image for the 'home' link, and simply change its position on the :hover:
#home {
background-image: url(http://example.com/spriteOne.png);
background-repeat: no-repeat;
background-position: 0 100px;
}
#home:hover {
background-position: 0 200px;
}
This does require set heights for the elements with the css-sprite background, though.
2, hidden preloading elements:
#home {
background-image: url(http://example.com/bg.png);
background-repeat: no-repeat;
background-position: 0 100px;
}
#home:hover {
background-image: url(http://example.com/hoverBg.png);
}
#preload,
#preload img {
display: none;
}
<div id="preload">
<img src="http://example.com/hoverBg.png" />
</div>
1. Answer:
Use CSS Sprites
2. Answer: Or create something like this:
<a href="link.html">
<!-- Remove this img-tag if you don't have a 'nohover' background -->
<img alt="image" src="images/image.png" class="nohover" />
<img alt="imagehover" src="images/image.png" class="hover" />
</a>
And the CSS:
img.nohover {
border:0
}
img.hover {
border:0;
display:none
}
a:hover img.hover {
display:inline
}
a:hover img.nohover {
display:none
}
A method that I have found works really well for rollovers is using CSS sprites, i.e. using an image that contains both the original and rollover versions of the image. That way both versions load at the same time, and changing between them is just a matter of changing the background-position style.
One way to do it is to add an invisible image to your page, with the same URL. So by adding the following to the beginning of the documents body, you actually instruct the browser to load this image as soon as possible.
<IMG src="rolloverImage.png" style="display:none">
While this tag remains a part of your document, it is not shown or even rendered because of the "display:none" settings. You can even listen to its load event and remove the tag completely from the DOM once it is loaded, to keep the "garbage" out of the document. Once an image is loaded to memory, it is automatically reused every time you refer to the same URL, so once you set the source of the other image to the same URL, it will be loaded from memory.
Hope that helps,
Kobi
Put the image in a div with a style set to { height: 0; overflow: hidden; }, that should make the browser preload the image.
I've come across an interesting problem in the following line of code:
<img style="background-image:url(Resources/bar.png); width: 300px; height: 50px;"/>
In Safari (at least), a gray border surrounds the 300x50px area. Adding style="border: none;" doesn't remove it. Any ideas?
Thanks.
Mike
So, you have an img element that doesn't have a src attribute, but it does have a background-image style applied.
I'd say that the gray border is the 'placeholder' for where the image would be, if you'd specified a src attribute.
If you don't want a 'foreground' image, then don't use an img tag - you've already stated that changing to a div solves the problem, why not go with that solution?
You can also add a blank image as a place holder:
img.src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='
This should do the trick!
Actually, this seems to work at least on Chrome:
img {
content: "";
}
The following will use css to set the src to a tiny transparent image which solves the src attribute issue while maintaining control from image:
content:url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
My overall approach is to define the following in my reset.css, then use a class to provide the actual image and control it. This behaves just like an img, but is entirely css controlled.
img {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
*display: inline;
vertical-align: middle;
*
vertical-align: auto;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
box-sizing: border-box;
}
img:not([src]) {
content: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}
.myuniqueimage {
background-image: url('../images/foobar.png');
height: 240px;
}
Thanks to +programming_historian and +binnyb for the data:image tip
try <img border="0" />
That should do the trick.
EDIT
Sorry I see you are doing something very wrong.. you are setting a background image on a img tag.. that doesn't really make sense...
instead of a imagetag use a
<div style="background-image: url(Resources/bar.png);"></div>
or if it is a image you want in that area use a
<img src="Resources/bar.png" border="0" Width="500px" Height="300" />
img tags need a src attribute.
e.g.,
<img src="Resources/bar.png" alt="bar" width="300" height="50" />
But img is only for inline (foreground) images. If you actually want the image to be a background of something, you need to apply the style to the actual element you want it to be the background of:
<div style="background-image:url(Resources/bar.png);">...</div>
Tried setting the border to 0px?
EDIT: Yes, you are meant to have background images in the css of another class. Doing it in div or in the body tag (depending what your trying to do) will work. It also stops the background image being a element in itself which would screw the flow of the elements on the page and mess your positioning up.
<div class="myDivClass">content to go on TOP of the background image</div>
CSS:
.myDiVClass
{
background: url(Resources/bar.png) no-repeat;
width: 300px;
height: 50px;
}
or
<div class="myDivClass" style="background: url(Resources/bar.png) no-repeat; width: 300px; height: 50px;">content to go on TOP of the background image</div>
It's best to keep CSS seperate as it otherwise defeats part of the point though.
I had a similar issue where my initial HTML had an IMAGE tag with no source. My Javascript determined which image to show. However before the image was loaded the user saw the placeholder box.
<img id="myImage">
My fix was to update the initial image tag CSS to
#myImage {
display:none;
}
And then used a JQuery to show it once its content was loaded.
$('#myImage')
.attr('src', "/img/" + dynamicImage + '.png')
.fadeTo(500, 1);
Try setting this instead of background-image:
background: url(Resources/bar.png) no-repeat;
if is happening only in Safari and not in other browsers try to reset the browser CSS using something like YUI CSS RESET
The correct way it would be to separate the css from code and to have a CSS class for the image.
<img src='whatever.png' alt='whatever' class='className' />
and in the css to define what className looks like.
,className {border:0;}
I know this is an old question but I found this useful..
In the case that your Resources/bar.png is a foreground image in the form of a sprite, it makes sense to use an img tag rather than a div. When you do this it can help to have a 1px transparent image file which you use for the src attribute, then set the background image as you do here e.g.
<img src="transparent.png" style="background: url(sprite.png) x y" />
Here you set x and y to be the pixel position on the sprite that you want the image to start at. This technique is also explained at: http://www.w3schools.com/css/css_image_sprites.asp
Of course the downside of this is that there is an extra request, but it you're always using the same transparent image for you sprites it's not a massive deal.
Try this one, it worked for me(on chrome and Safari). That was not the border but the shadow, so please add this line to the tag:
{-webkit-box-shadow:none;}
Hope it works for you too.
add an empty src="" to your image component if your using as a background-image in css the square will disappear
<image class=${styles.moneyIcon} src="" ></image>