once we hover on image, i want to display another image.
<div>
<a href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>
</div>
i tried as below :
I added class="a1", but it did't worked for me.
<a class="a1" href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>
css
.a1:hover {
background-image: url('images/G+1.png');
}
Here are two solutions for your query. (Change image on mouse hover)
HTML + JavaScript Demo
<div class="image_hover">
<a href="#" rel="nofollow">
<img src="http://i.imgur.com/h1hLX4Vb.jpg" height="160" onmouseout="this.src='http://i.imgur.com/h1hLX4Vb.jpg'" onmouseover="this.src='http://i.imgur.com/dmnwaafb.jpg'" width="160">
</a>
</div>
HTML + CSS Demo
.image_hover {
position: relative;
cursor: pointer;
}
.image_hover img {
position: absolute;
transition: opacity .5s ease;
}
.image_hover img:hover {
opacity: 0;
}
<div class="image_hover">
<img src="http://i.imgur.com/h1hLX4Vb.jpg" width="160" height="160"/>
<img src="http://i.imgur.com/dmnwaafb.jpg" width="160" height="160"/>
</div>
First, give your link tag some style, to set it's background.
a.a1 {
display: block;
width: 100px;
height: 50px; (width and height are whatever you need them to be)
background: url('images/G+.png') no-repeat center center;
}
Now this is a very light example here, but what it is doing is setting your link as a block-level element, giving the right dimensions of the image background, and then setting the whole elements background as the image.
Then, for the rollover effect, you use:
a.a1:hover {
background: url('images/G+1.png') no-repeat center center;
}
Now I like to put my no-repeat and positioning attributes in the background attribute, you can separate these into background-size etc if you really want.
I am aware in your implementation you have an img in there setting the picture, but for what you want to achieve I'd suggest using a css alternative.
SO link on the subject (as per comment):
CSS: image link, change on hover
Additional the answer in #AaronLavers's comment (use background-image and replace it on :hover), you can use :before - pseudo class and content property.
The plus
It's generic solution. You have not to set the width and the height of the link - like in background-image way.
The minus
You can't change the image's size like using background-size etc. but if your image is the exact size you want, the problem solved.
a:before {
content:url(http://i.stack.imgur.com/upUcm.jpg);
}
a:hover:before {
content:url(http://i.stack.imgur.com/sn2Ag.jpg);
}
The reason this is not working is because the img tag and background-image are 2 different things. If you want this to work, you could try putting the background image on the a to begin with and then changing it on hover. It needs important because of specificity rules. The other option would involve putting php in your css file, but that is probably not worth the effort to set up.
CSS
.a1:hover {
background-image: url('images/G+1.png') !important;
}
HTML
<a class="a1" style="background-image: url('<?php echo $this->getSkinUrl('images/G+.png') ?>');"></a>
Related
This question already has answers here:
CSS background image alt attribute
(11 answers)
Closed 6 years ago.
How can I display text instead of logo, if the logo graphic file isn't loaded or missing? I have div with background PNG image:
<div class="iHaveBgImage">
this text should be displayed if bg image is not loaded
</div>
.iHaveBgImage { background-image: url('img.png') }
It doesn't have to be pure CSS, Javascript solution is allowed. I was thinking of onerror event, but it works with images, not elements that have image backgrounds.
EDIT:
I was told this has been answered before, but there is another situation. I didn't say one can alter DOM, only apply CSS and JS. Second, in that other solution is sugested I should use title attribute and I tried it and it doesn't display text, only hovers it.
Try it this way:
HTML
<div class="iHaveBgImage">
<p>this text should be displayed if bg image is not loaded</p>
</div>
CSS
.iHaveBgImage { background-image:
url('https://s31.postimg.org/yqv51r5xn/6936671_hd_wallpapers_for_ipad.jpg');
color:red;
}
.iHaveBgImage > p {
position: relative;
z-index: -1;
}
Works perfectly https://jsfiddle.net/s0gt2eng/
This is what I suggested in the duplicate tag:
.iHaveBgImage{
width:500px;
height:200px;
background-image: url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-5.jpg');
}
<div class="iHaveBgImage" title="this text should be displayed if bg image is not loaded">
</div>
Alternative using span tags:
span.image:before{
content:" "; background:url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-5.jpg');
display: block;
position:absolute;
width:500px;
height:200px;
}
<span class="image">alternate text</span>
One workaround to this would be to change
<div class="iHaveBgImage">
this text should be displayed if bg image is not loaded
</div>
.iHaveBgImage { background-image: url('img.png') }
To :
<img src="img.png" alt="Seems like this image failed to load" />
Alternatively I am not sure if the following would work, but you can MAYBE do something along the lines of:
<img class="iHaveBgImage" alt="Seems like this image failed to load" />
.iHaveBgImage { background-image: url('img.png') }
EDIT: Something that just popped up in my head that could possibly also work would be to have:
<div class="iHaveBgImage">
<p class="bgText">this text should be displayed if bg image is not loaded</p>
</div>
.iHaveBgImage {
background-image: url('img.png')
}
.bgText {
z-index: -9999;
}
Try this
P.hidden {
visibility: hidden;
}
.iHaveBgImage {
background-image: url('https://s31.postimg.org/yqv51r5xn/6936671_hd_wallpapers_for_ipad.jpg');
color: red;
width:700px;
height:300px;
}
<div class="iHaveBgImage">
<p class="hidden> This text should be displayed if bg image is not loaded</p>
</div>
if you want to use text visible to text use <span></span> tag and create css span {display: block;} or
html
<p class="hidden> This text should be displayed if bg image is not loaded</p>
CSS
P.hidden {
visibility: hidden;
}
I've got a bunch of images, on click I want the images to turn white emulating some kind of fade effect. So you click it and for 1 second it fades from the original image to just white. I also need it to turn back to the original image when the user clicks something else.
Is this possible with JavaScript? - If so what should I be looking at (I'm really bad with graphics).
I've had a go at trying this with opacity but I don't want the background to be visible behind the image
Psuedo-element Solution
You could use a wrapper with a pseudo-element to overlay what you're looking for -- and the animations are handled by a toggled CSS class (which is ideal for performance).
CodePen Demonstration
HTML
<div class="whiteclicker">
<img src="http://lorempixel.com/400/200" alt=""/>
</div>
SCSS
#import "compass/css3/transition";
body { background: gainsboro; text-align: center; }
.whiteclicker {
display: inline-block;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
top:0; left:0; right:0; bottom:0;
background: white;
opacity: 0;
#include transition(opacity 1s ease);
}
&.active::after {
opacity: 1;
}
}
JS
$('.whiteclicker').click(function(){
$(this).toggleClass('active');
});
To ameliorate the Spencer Wieczorek solution (the way two seems to be the best solution on my opinion) :
What about creating the white div on the fly (and fade it in and out) instead of put it in the html code ?
See the fiddle.
$("#myImage").click(function(){
$(this)
.parent().css({position:'relative'}).end()
.after($('<div>')
.hide()
.css({position:'absolute'
, top: $(this).position().top
, left: $(this).position().left
, width: $(this).width()
, height: $(this).height()
, background: '#FFF'
})
.fadeIn('fast')
.on({
click : function(e){
$(this).fadeOut('fast', function(){ $(this).remove();});
}
})
);
});
Then, you don't have anything to add to the html code or in the css styles, Jquery does everything.
#Spencer Wieczorek : I did my own answer, because I did not agree with your way of designing the css style (the fixed position is really not good, especially if the page is scrolled for example...). Mine is more ... standalone-y ;)
You might want to try having two images stacked on each other.
See this:
<script type="text/javascript">
var image1 = '<img class="images" src="Image 1" onClick="switch();" />';
var image2 = '<img class="images" src="Image 2" onClick="switch();" />';
var currentImage = 1;
function switch(){
if(currentImage==1){
currentImage++;
document.getElementById("image").innerHTML = image2;
}
if(currentImage==2){
currentImage--;
document.getElementById("image").innerHTML = image1;
}
}
</script>
<style>
.images{ position:fixed; top: 0; left: 0; }
</style>
<img class="images" src="Black image" />
<div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>
For the fade I'm just gonna see how you could do it.
EDIT:
<script type="text/javascript">
var fadecount = 100;
function fade() {
document.getElementById("imageToFade").style.opacity = fadecount;
fadecount--;
if(fadecount==0){
clearTimeout(fade);
}
}
function start_fade(){
var fade = setTimeout(fade(), 10);
}
</script>
With Base 64 you can just have the binary version of the picture and then an all white picture and based on the .click you reassign the src to the white base64...
document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
just change to the all white version after the click, technically js driven from click event, and doesn't involve two different elements existing just at different layers...
I wanted to show a loading icon to users until the page elements are fully loaded. How can I do that with javascript and I want to do it with javascript, not jquery?
Here is a link how google does it
How can I do this?
triggering some function on onload event or something like this .. I know it will be done somewhat like this or any other ways to do it?
Or there is some event for it?
UPDATE
I did something using display property I hide the body element but and onload of body tag I change its property but where to put the loading icon and add more interactivity.
HTML
<body>
<div id="load"></div>
<div id="contents">
jlkjjlkjlkjlkjlklk
</div>
</body>
JS
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
document.getElementById('contents').style.visibility="hidden";
} else if (state == 'complete') {
setTimeout(function(){
document.getElementById('interactive');
document.getElementById('load').style.visibility="hidden";
document.getElementById('contents').style.visibility="visible";
},1000);
}
}
CSS
#load{
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}
Note:
you wont see any loading gif if your page is loaded fast, so use this code on a page with high loading time, and i also recommend to put your js on the bottom of the page.
DEMO
http://jsfiddle.net/6AcAr/ - with timeout(only for demo)
http://jsfiddle.net/47PkH/ - no timeout(use this for actual page)
update
http://jsfiddle.net/d9ngT/
The easiest way to put the loader in the website.
HTML:
<div id="loading"></div>
CSS:
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #fff url('images/loader.gif') no-repeat center center;
z-index: 9999;
}
JQUERY:
<script>
jQuery(document).ready(function() {
jQuery('#loading').fadeOut(3000);
});
</script>
add class="loading" in the body tag then use below script with follwing css code
body {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body { min-height: 100%; }
body.loading {
background: #333 url('http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif') no-repeat 50% 50%;
-webkit-transition: background-color 0;
transition: background-color 0;
opacity: 0;
-webkit-transition: opacity 0;
transition: opacity 0;
}
Use this code
var body = document.getElementsByTagName('body')[0];
var removeLoading = function() {
setTimeout(function() {
body.className = body.className.replace(/loading/, '');
}, 3000);
};
removeLoading();
Demo: https://jsfiddle.net/0qpuaeph/
HTML, CSS, JS are all good as given in above answers. However they won't stop user from clicking the loader and visiting page. And if page time is large, it looks broken and defeats the purpose.
So in CSS consider adding
pointer-events: none;
cursor: default;
Also, instead of using gif files, if you are using fontawesome which everybody uses now a days, consider using in your html
<i class="fa fa-spinner fa-spin">
Element making ajax call can call loading(targetElementId) method as below to put loading/icon in target div and it'll get over written by ajax results when ready. This works great for me.
<div style='display:none;'><div id="loading" class="divLoading"><p>Loading... <img src="loading_image.gif" /></p></div></div>
<script type="text/javascript">
function loading(id) {
jQuery("#" + id).html(jQuery("#loading").html());
jQuery("#" + id).show();
}
HTML page
<div id="overlay">
<img src="<?php echo base_url()?>assest/website/images/loading1.gif" alt="Loading" />
Loading...
</div>
Script
$(window).load(function(){
//PAGE IS FULLY LOADED
//FADE OUT YOUR OVERLAYING DIV
$('#overlay').fadeOut();
});
firstly, in your main page use a loading icon
then, delete your </body> and </HTML> from your main page and replace it by
<?php include('footer.php');?>
in the footer.php file type :
<?php
$iconPath="myIcon.ico" // myIcon is the final icon
echo '<script>changeIcon($iconPath)</script>'; // where changeIcon is a javascript function whiwh change your icon.
echo '</body>';
echo '</HTML>';
?>
I have the following Javascript code:
// Animate .gallery element to the correct left position.
$("#gallery-images").animate({
left : "-500px"
},1500);
Which is being applied to this HTML:
<div id="gallery-images">
<?php foreach($content1 as $img) : ?>
<div class="gallery-image-holder">
<a class="gallery-image" href="<?php echo "/granados/images/".$img['url'];?>"> <img src="<?php echo "/granados/images/".$img['url'];?>" /></a>
</div>
<?php endforeach;?>
</div>
With this CSS:
#gallery-images{
display: inline-block;
width:37em;
height:11em;
overflow-x: hidden;
padding-top: 4em;
float:left;
margin-right: .5em;
}
Everything appears to work, at least when I inspect the code via Chrome. The left: "-500px" is being set, but the element doesn't move. Why is this? What am I doing wrong?
You have your class/id wrong you would have to have
$(".gallery-images").animate({
left : "-500px"
},1500);
because it is a class that you are calling
also the class you are trying to call is "gallery-images" but the class that you made is "gallery-image"
$(".gallery-image").animate({
left : "-500px"
},1500);
so just fix that type and you should be good to go :)
I found some code on the web which I got to work...The problem arose when I tried to expand it to 3 buttons..
The Original code in bold below...I tried to follow the code to add 2 more buttons, the buttons do appear but when I click buttons 2 and 3, they effect button 1 only...Button 1 works perfectly with the code below
<script type="text/javascript">
//preload images first
**img1=new Image()
img1.src="CommonFiles/ArrowBackShadow.png"
img2=new Image()
img2.src="CommonFiles/ArrowBackPress.png"**
img3=new Image()
img3.src="CommonFiles/ArrowUpShadow.png"
img4=new Image()
img4.src="CommonFiles/ArrowUpPress.png"
img5=new Image()
img5.src="CommonFiles/ArrowForwardShadow.png"
img6=new Image()
img6.src="CommonFiles/ArrowForwardPress.png"
</script>
Body....
<body>
<a href="whatever.htm"
onMousedown="document.images['example'].src=img2.src"
onMouseup="document.images['example'].src=img1.src">
<img src="CommonFiles/ArrowBackShadow.png" name="example" border=0></a>
<a href="whatever.htm"
onMousedown="document.images['example'].src=img4.src"
onMouseup="document.images['example'].src=img3.src">
<img src="CommonFiles/ArrowUpShadow.png" name="example" border=0></a>
<a href="whatever.htm"
onMousedown="document.images['example'].src=img6.src"
onMouseup="document.images['example'].src=img5.src">
<img src="CommonFiles/ArrowForwardShadow.png" name="example" border=0></a>
</body>
I'm far from a webmaster...Thanks for your help...
Randall
Do it with CSS.
.button {
display: block;
/* hide text: */
font-size: 0;
color: transparent;
}
#up {
width: 100px; /* replace with the width / height of your image */
height: 30px;
background-image: CommonFiles/ArrowForwardUp.png;
}
#up:active:hover {
background-image: CommonFiles/ArrowForwardUp.png;
}
/* Same for forward */
And your html:
Up
Forward
If all the buttons are of the same width and height, you even could move the width and height into the .button section.
The pros:
Your html code looks by far clearer
It's easy to maintain.
Later, you could style your buttons completely different without touching the html, but just modifying the CSS style code.
Browsers with images disabled, blind people etc. have the text instead of the images
No java script is required (some users have disabled it).
Make sure that the identifiers are correct:
<a href="whatever.htm"
onMousedown="document.images['thishouldmatch1'].src=img4.src"
onMouseup="document.images['thishouldmatch1'].src=img3.src">
<img src="CommonFiles/ArrowUpShadow.png" name="thishouldmatch1" border=0></a>