I have anchors on a page that displays a different background image on mouse hover and mouse out. I have preloaded the images to avoid flickering and re-requesting the images from the server on mouse hover/out. The scripts works fine on IE8/FF but Chrome behaves differently. In the latest version of Chrome, the first time I hover on the anchor, the image is re-requested from the server causing a flicker, why is this? Succeeding mouse hover/out works fine and there is no flicker.
Code below:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style type="text/css">
body:after
{
content: url('/images/1.png') url('/images/1a.png')
position: absolute;
top: -9999px;
left: -9999px;
}
.imageHover
{
display:inherit;
width:25px;
height:50px;
background:url('/images/1.png') no-repeat;
}
.imageOut
{
display:inherit;
width:25px;
height:50px;
background:url('/images/1a.png') no-repeat;
}
</style>
<script language="javascript" type="text/javascript">
var oneSelected = new Image();
var oneUnselected = new Image();
oneSelected.src="/images/1.png";
oneUnselected.src="/images/1a.png";
function OnImageMouseOver(target) {
$(target).toggleClass('imageHover', true);
$(target).toggleClass('imageOut', false);
}
function OnImageMouseOut(target) {
$(target).toggleClass('imageHover', false);
$(target).toggleClass('imageOut', true);
}
</script>
</head>
<body>
</body>
</html>
Converted anchor to image, but it still won't work in Chrome:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript">
if (document.images) {
var oneSelected = new Image();
var oneUnselected = new Image();
oneUnselected.src = '/images/1a.png';
oneSelected.src = '/images/1.png';
}
function OnRatingMouseOver(target, newSrc) {
$(target).attr('src', newSrc);
}
function OnRatingMouseOut(target, newSrc) {
$(target).attr('src', newSrc);
}
</script>
</head>
<body>
<div id="mainDiv" style="width:400px;">
<div id="inputDiv">
<table id="inputTable">
<tr>
<td>Rating</td>
<td>
<img id='rating1Anchor'
src='/images/1a.png'
onmouseover="OnRatingMouseOver(this, '/images/1.png');"
onmouseout="OnRatingMouseOut(this, '/images/1a.png');"
onclick="OnRatingClick(this, '/images/1.png', 1);">
</td>
</tr>
</table>
</div>
</div>
</body>
<html>
It may not be preloading them at all, as it's not displaying them it's just adding to the DOM? Try the following code to preload your images.
var preload = new Array();
function preload_image(){
for (var x = 0; x < preload_image.arguments.length; x++)
{
preload[x] = new Image();
preload[x].src = preload_image.arguments[x];
}
}
I have to say I very much doubt that the pngs are actually being rerequested from the server in Chrome. Can you post a screenshot of the Timeline in dev Tools showing the request going off twice? :) I think it's far more likely that you're just experiencing a slight hesitation during the repaint.
Is there a reason you aren't using image sprites? They are the canonical solution to this problem. The idea is simply that a single image is loaded that contains both the normal and "hover" or "active" states. The portion of the graphic shown gets swapped out using css "background-position". Here's a tutorial, and here's a table of support for "background-position" which goes all the way back to IE4.
Code should look something like this:
<html>
<head>
<style>
#myCoolLink {
background-image:url('img/image.gif');
background-position:0px 0px;
}
#myCoolLink:hover,
#myCoolLink.active {
background-position:0px -72px; //depending of course on the image
}
</style>
</head>
<body>
</body>
</html>
No script required, and it's much terser. The other great advantage of this is that you can still programmatically change the image over to the "hover" anytime you want by toggling the "active" class on the link, if you ever need to.
Related
ive looked at other answers and none of them seemed to work which is why i decided to re-ask the question and show you guy my code so you can help me so here it is :
function searchForm() {
var body = document.getElementsByTagName('body')[0]
var search = document.getElementById('GIF-search').value;
var content = document.getElementById('content')
var xhr = $.get("http://api.giphy.com/v1/gifs/search?q=" + search + "&api_key=api");
xhr.done(function(data) {
var image = data;
var GIF = image['data'][0]['embed_url'];
var GIF_image = document.createElement('img');
GIF_image.setAttribute('src', GIF);
GIF_image.setAttribue('id', 'GIF');
content.appendChild(GIF_image)
});
}
var searchGIF = document.getElementById('search_GIF')
searchGIF.addEventListener('click', searchForm, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GIF viewer</title>
<style type="text/css">
#content {
width: 100%
}
img {
width: 250px;
height: 250px
}
</style>
</head>
<body>
<div id="Search">
<input type="text" name="" id="GIF-search">
<button id="search_GIF">Search GIFs</button>
</div>
<div id="content"></div>
<script src="jquery-3.2.1.js"></script>
<script src="GIFsearch.js"></script>
</body>
</html>
my problem here is that im getting a blank image on my site can anyone explain why this is happening and how i can fix it so it will actually show the GIF?
btw i know in the $.get("http://api.giphy.com/v1/gifs/search?q=" + search + "&api_key=api"); the apikey in not valid (this is on purpose);
Couple of things:
There was no jQuery in jsfiddle. Make sure you have it in your code.
Make https:// api call if your page is using https:// protocol.
setAttribute when you are setting id has got a typo. Look carefully.
URL you are getting at image['data'][0]['embed_url'] is not a image url but a webpage url. Try console log it and see. So you cant really set it as a src of some img tag. Find the correct image url and then proceed.
I'm using Background Check JS to try and get some text on my website to change based on the background being light or dark. I can't get it to work on my site to made a minimal replica of it and still no dice:
<html>
<head>
<style>
.background--light {
color: black;
}
.background--dark {
color: white;
}
.background--complex {
color: gray;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://www.kennethcachia.com/background-check/scripts/background-check.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
BackgroundCheck.init({
targets: '.target',
});
});
</script>
</head>
<body>
<img src="http://www.kennethcachia.com/background-check/images/6.jpg">
<div style="position: fixed; top: 65%;" class="target">Why not white?</div>
</body>
</html>
Also sometimes an "CanvasRenderingContext2D': The canvas has been tainted by cross-origin data." Error pops up in this demo sometimes?
I may have missed something trivial in this demo but I can't get it to work at all on my "full" version I'm trying to write.
I am having some problems, the plan is when i click a button, the pictures change one bu one to represent a traffic light sequence. So when i run the code i want it to start on red and run through the sequence (British sequence). Although when i do run the code all i get is all the pictures coming up at the same time with no effect coming from the button. if anyone can help to accomplish this then that would be greatly appreciated! :)
Cheers!
Here is my code for HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Traffic Lights</title>
<link href="flag_style.css" rel="stylesheet" type="text/css">
<script src="flagscript.js"></script>
</head>
<body>
<input type="button" value="click me" onclick="changeLight()">
<img id="state_1" onclick="changeLight()" src="http://www.drivingtesttips.biz/images/traffic-light-red.jpg">
<img id="state_2" onclick="changeLight()" src="http://www.drivingtesttips.biz/images/traffic-lights-red-amber.jpg">
<img id="state_3" onclick="changeLight()" src="http://www.drivingtesttips.biz/images/traffic-lights-green.jpg">
<img id="state_3" onclick="changeLight()" src="https://assets.digital.cabinet-office.gov.uk/media/559fbe48ed915d1592000048/traffic-light-amber.jpg">
</body>
</html>
CSS:
.state_1 {
width:300px;
height:300px;
}
.state_2 {
width:300px;
height:300px;
}
.state_3 {
width:300px;
height:300px;
}
.state_4 {
width:300px;
height:300px;
}
JavaScript:
var flagSeq = ["state_1","state_2","state_3","state_4"];
var state = 0;
function changeFlag() {
if (state == 0) {
document.getElementById("state_1").className = flagSeq[state][0];
state++;
}
if else (state == 1) {
document.getElementById("state_2").className = flagSeq[state][1];
state++;
}
if else (state == 2) {
document.getElementById("state_3").className = flagSeq[state][2];
state++;
}
if else (state == 3) {
document.getElementById("state_4").className = flagSeq[state][3];
state = 0;
}
}
I deleted my other answer because this is apparently a homework problem. I'll gladly point out what to improve, though, so here's the first paragraph from the answer I posted.
There are several issues with your code, to the point where I wonder why you haven't noticed some of them yourself.
You seem to only want to show one image at a time, but you never actually hide any of them.
You're giving the images id attributes but only use class selectors in your CSS.
There are two elements with an id of state_3.
if else is not valid in JavaScript (the console will be happy to point out a syntax error). You probably meant to write else if instead.
As j08691 pointed out, you define a function changeFlag but refer to it as changeLight in your HTML.
Side note: for real-life projects, you'd be better off downloading the images and using those instead of linking to external resources.
What I would do is have only one img element and use JavaScript to change its src attribute.
What you want is something like this plunker
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Traffic Lights</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<input type="button" value="click me" onclick="changeLight()">
<div id="light-div" class="light light-0" onclick="changeLight()"></div>
</body>
</html>
.light {
width: 300px;
height: 300px;
display: block;
background-position: center center;
background-repeat: no-repeat;
}
.light-0 {
background-image: url(http://www.drivingtesttips.biz/images/traffic-light-red.jpg);
}
.light-1 {
background-image: url(http://www.drivingtesttips.biz/images/traffic-lights-red-amber.jpg);
}
.light-2 {
background-image: url(http://www.drivingtesttips.biz/images/traffic-lights-green.jpg);
}
.light-3 {
background-image: url(http://assets.digital.cabinet-office.gov.uk/media/559fbe48ed915d1592000048/traffic-light-amber.jpg);
}
var lightSeq = ['light-0', 'light-1', 'light-2', 'light-3'];
var state = 0;
function changeLight() {
state++;
if (state === lightSeq.length)
state = 0;
document.getElementById('light-div').className = 'light ' + lightSeq[state];
}
Really there are a lot of errors in your code both HTML/JS, first hide something then better try to show it-
Still I got something for you, maybe this is what you needed, check the link below-
$(document).ready(function(e){
$('#ab').click(function(e){
//alert(1);
var a = document.getElementsByTagName('img');
for(i=1;i<=a.length;i++){
setTimeout(function(x){
return (function(){
$('img#state_'+x).show();
});
}(i),1000*i)
}
});
});
https://plnkr.co/XGG5PHI6bMP0XJ484rUS?p=preview
I'm trying to do screen shot paste in my website using firefox. It can be done easily by giving the div as contenteditable='true'.
html
<Html>
<Head>
<Title>Screen Shot Example</Title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:258px;
height:165px;
z-index:1;
left: 71px;
top: 59px;
}
</style>
</Head>
<Body>
<div id="apDiv1" contenteditable='true'>Paste Test</div>
</Body>
</Html>
I can paste images from clipboard to particular div. Now the issue starts, how do I get the value from the div. For an example my user paste screenshot in the div and i want it to be save in db. If it normal textbox I can get the textbox value. Is there any way I can convert the DIV to image. Any advice and any referral links is highly appreciated.
document.addEventListener('DOMContentLoaded', function(){
var text = document.getElementById('apDiv1').innerText;
}, false);
To replace the div:
document.addEventListener('DOMContentLoaded', function(){
var el = document.getElementById("apDiv1");
var img = document.createElement("img");
img.setAttribute('src', '...');
el.parentNode.replaceChild(el, img);
}, false);
How can i load the original image when the tumbnail version of the image has been clicked?
Im using ASP.NET in combinaton with javascript.
The original images are big, so they have been scaled on server side. This makes the site load faster. But somehow, both versions (original and tumbnail) of the images are being downloaded.
I'm trying to download only the tumbnail version of the image. And when the user clicks on the image, i want to show the original image.
How can i get this done?
Html such as below for each thumbnail image should do the trick
<a href="[url to original image]" target="_blank" id="thumbnail_link">
<img src="[url to thumbnail image]" alt="Click to see the full image" />
</a>
Edit: Modified to illustrate use of FancyBox.
Use above markup along with below java-script:
$(document).ready(function() {
$("a#thumbnail_link").fancybox();
})'
Don't forget to include jquery and fancybox js files.
I think you have to show thumbnails first and on click you need to open the original images in a new pop up window. You can do this using code as given below -
<SCRIPT LANGUAGE="JavaScript">
function openImage(imageFile){
windowOpen=window.open("",'Open','toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=1,width=420,height=420');
windowOpen.document.writeln("<head><title>Image</title></head><body>");
windowOpen.document.writeln('<img src=http://www.mysite.com/' + imageFile + 'border=1>');
windowOpen.document.writeln("</body></html>");
}
</SCRIPT>
Then call this openImage() method during onClick of the thumbnail image.
You can pass imageFile as parameter to the function.
It sounds like you have both images referenced in your HTML, even though one is hidden from view, so the browser requests both. What you'd need to do is use JavaScript to create the full size <img> tag from scratch and then add it to the relevant place in the HTML. The browser will then load the full size image once it's added to the DOM.
For fancy box, all you need to do is
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
Regards,
Andy.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://identify.site88.net/showimage.js'></script>
<style type='text/css'>
#test{
display:none
}
#blackout {
width:50%;
position:absolute;
background-color: rgba(0, 0, 0, .5);
display: none;
z-index: 20;
}
.modal {
margin: auto;
}
#close {
color: white;
font-weight: bold;
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$('img').click(function () {
var img = $(this).clone().addClass('modal').appendTo($('#blackout'));
$('#blackout > #close').click(function () {
$('#blackout').fadeOut(function () {
img.remove();
});
});
$('#blackout').fadeIn();
});
});
$(window).load(function(){
$('#close2').hide();
$('span').click(function () {
$('#test').show();
$('#close2').show();
$('#txtsp').hide();
$('#blackout2 > #close2').click(function () {
$('#blackout2').fadeOut(function () {
$('#test').hide();
$('#txtsp').show();
$(this).css({
"text-decoration": ''
});
});
});
$('#blackout2').fadeIn();
});
});
</script>
</head>
<body>
<div id="blackout2"><div id="close2" >Close</div></div><img id="test" src="http://data.vietinfo.eu/News//2012/10/16/179281/1350402084.7404.jpg"/> <span id="txtsp">Click here to show image</span>
<br /><br />
<div id="blackout"><div id="close">Close</div></div><div style="width: 50px; height: 50px;"><img width="100%" src="http://dantri.vcmedia.vn/Uploaded/2009/06/02/hh02066.jpg" /></div>
</body>
</html>
You can replace tag span by your image have been scaled on server side.