I want to add rollover effect on overlapping transparent images.
For example:
The following image is divided into 5 parts and I want to add rollover effect (different image) on each of them
When O tried with div or img tag, the image is rendered as a rectangle so rollover effect is not proper. When i rollover on green part between yellow, the yellow image gets highlighted because its z-index is high.
Following is the code that I tried:
<body>
<br />
<img src="part1.png" onclick="console.log('test1');"/>
<img src="part2.png" onclick="console.log('test2');" style="position:absolute; left:30px; top: 19px;"/>
<img src="part3.png" onclick="console.log('test3');" style="position:absolute; left:70px; top: 15px;"/>
<img src="part4.png" onclick="console.log('test4');" style="position:absolute; left:95px; top: 16px;"/>
<img src="part5.png" onclick="console.log('test5');" style="position:absolute; left:123px; top: 24px;"/>
</body>
images => , , , ,
I don't want to use jQuery, if possible.
The way I did this sort of thing is to place all the image elements, then put one big invisible (transparent) image over the top ("big" in the CSS, the file is actually 1x1 pixel). Then apply an imagemap to the topmost image. Result can be seen here: http://pokefarm.org/
Thanks Kolink and others for their responses. I tried to create image map as Kolink suggested but it was too difficult and also if i made a slight change to the image, then i would have to create a new image map.
I replaced this part with a flash swf file. It was far easier for me to create this kind of thing in flash.
Related
I'm trying to replace one image (closed bag) to another (open bag) using mouseenter and mouseleave functions. For some reason it only works when I leave the mouse vertically, but not horizontally. I suspect it has to do with the length of the image but I inspected it and it was not the issue. Here is my code:
$("#tumi_front").mouseenter(function() {
$("#tumi_front").hide();
$("#tumi_open").show();
});
$("#tumi_open").mouseleave(function() {
// alert('leave');
$("#tumi_front").show();
$("#tumi_open").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="tumi_front" src="tumi_front.png" alt="yolo front" height="40%" width="40%" />
<img id="tumi_open" src="tumi_open.png" alt="yolo open" height="30%" width="30%" " style="display: none " />
Thank you in advance for the help!
The problem is you're setting your two different images to have a different height and width. Your front image is at 40% and your second is at 30%. So when you try to hover outside of your smaller image, it triggers the hover onto the larger image, and then hides your image over again, causing the glitch.
Your code (40% 30% broken)
A better solution for this would be to give both your images the same class and toggle the images. This will fix the hover issue you are having with the different sized images, and it is more efficient.
jQuery
$(".double-img").on("mouseenter mouseleave", function() {
$(".double-img").toggle();
});
JSFiddle
My code (40% 30% fixed)
Why not use 1 image (image sprite) and do a background-position with css on :hover. No jquery required!
I have a large image set as a background:
<body onload="StartTimers();" onmousemove="ResetTimers();"
style="background-image: url('img/bkgrnd.jpg'); background-size: 100%;">
That is the problem; it is 1.72mb (1900 x 1400). I really don’t want to size the image down in Photoshop and lose image quality. But it is slowing my load time. One of the things I am trying to do is speed up the load time for my web page.
I figured using a sliced image would be the best way. So I am trying to use a sliced image made from Photoshop. The problem is the HTML code it creates makes a table, no matter how I try to save it. But I need the image in the background, and tables are not ideal.
I tried to set the sliced images in the body these two ways:
body{
background-image: url(images/bkgrd_01.jpg),
url(images/bkgrd_02.jpg),......url(images/bkgrd_27.gif);
<body background="url(images/bkgrd_01.jpg),
url(images/bkgrd_02.jpg), url(images/bkgrd_03.gif),.......
url(images/bkgrd_27.jpg)">
Does anyone know how to make a sliced image a background-image for the body of the page?
1.tinypng.com
2.photoshop ctrl+alt+shift+s 100%
I have been experimenting with CSS zoom property for quite a some time now. I took a large 1920X1200 size image and sliced it down horizontally into 10 pieces (10 each of 1920X120). I am positioning images on webpage like this -
<img src="images/img0_01.jpg" style="position:absolute; top:0px; left:0px;">
<img src="images/img0_02.jpg" style="position:absolute; top:120px; left:0px;">
.
.
.
<img src="images/img0_10.jpg" style="position:absolute; top:1080px; left:0px;">
And then I am applying zoom to to the entire document like this -
$("body").css("zoom","54%");
What I am expecting is to see all the 10 images as a single image, and I see as expected in Firefox/Chrome. However in Safari I see gaps between images (see attached screenshot). How can this be resolved ?
Note All the images have margin, padding and border set to 0. Positioning of the images should only be absolute with top and left values.
Would appreciate any kind of help. Thanks.
Live Demo
One sort of quick hack I found that worked was just make the the images only 119 px apart instead of 120px. Looks much better on Safari and still looks pretty good on chrome.
I found this in a stackoverflow question on how to draw in canvas http://jsfiddle.net/ArtBIT/kneDX/ and now I want the canvas to cover my whole html page. For example:
<body>
<div id="2">
//code
</div>
<div id="2">
//code
</div>
</body>
So the canvas will be attached to the page and the user could draw over the content of the page. So is there any way to create the canvas inorder to take the 100% of the body be hidden apart from the drawing lines?
Edited:
How can I draw lines continuously without making circles in the above code? Also is there any way to draw something over the text without selecting it when you pass the mouse over it?
First, make the height and width properties of the canvas equal to the page height and page width. (Getting those values is quite difficult, so see the linked questions for the best way to do it -- or just use jQuery.)
Next, add some CSS to make the canvas sit in the absolute top-left corner of the page:
#canvas {
position: absolute;
top: 0;
left: 0;
}
Then, don't change the background color of the canvas as you currently do by calling ctx.clearTo. Canvases are transparent by default, so you'll be able to see the page underneath of it, as long as you don't change the background color.
Pass in the right width and height params instead of (200, 200)
Using window.screen.width and window.screen.height gives you this: http://jsfiddle.net/kneDX/878/
Update:
With this we will end up in canvas being as big as window and not the same size as client area. See apsillers's answer.
My Progress is # http://codebucket.webatu.com/code/portfoliotest/index.html
Code on JSfiddle: http://jsfiddle.net/warmlaundry/qJbG4/70/
I want to make the edges of the 'f' and 'l' stretch to the edge of the page. I'm just expanding the height of two images that sandwich the word.
I want the word itself to stay put, and I don't want the expanding images to displace any other elements.
Is there an easy way to achieve this? I imagine it has to do with positioning correctly, but I still don't have a full grasp of the subtleties of CSS positioning.
I apologize if this question is a repost; I couldn't think of a good way to phrase the question without posting my own example.
edit: here's my code (since the link seems to be bad)
<html>
<head>
<style type="text/css">
#portfolioBottom{position:relative;top:-1px;}
#portfoliotop{position:relative;top:1px;}
</style>
<script type="text/javascript">
var heightBottom;
var heightTop;
var interval;
function addHeight(){
document.getElementById("portfolioBottom").style.width="249px";
heightBottom = parseInt(document.getElementById("portfolioBottom").style.height);
heightBottom=heightBottom + 5;
document.getElementById("portfolioBottom").style.height=heightBottom;
document.getElementById("portfolioTop").style.width="210px";
heightTop = parseInt(document.getElementById("portfolioTop").style.height);
heightTop=heightTop + 5;
document.getElementById("portfolioTop").style.height=heightTop;
}
</script>
</head>
<body>
<button onclick="interval=self.setInterval('addHeight()',1);">Start</button><button onclick="interval=window.clearInterval(interval)">Stop</button><br /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio top.png" id="portfolioTop" style="height:6px;" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio.jpg" id="portfolio" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio bottom.png" id="portfolioBottom" style="height:6px;" />
</body>
</html>
I've gone with positioning the two extended bits and also I put the images as a background image to divs which then did the work.
Have just used your images (with positioning it could probably be done with a single image doing both bits, and sorry I didn't correct the missing pixel off the main image, I just overlapped the pixel for now, hence the cutoff look corrected the missing pixel on the main image would fix that ;) -
then, once positioned - I just animated the height and top/bottom negative positions simultaneously
I can't do JS so the demo's with jQuery, but hopefully the logic of the positioning will help you do the same in JS
also in mine I restricted the body height to stop it scrolling on forever, this might not be practical in real terms, but becasue the two images always go to the same height, the reverse effect brought them back together too.. so advantages maybe?
the live example
What about just using CSS and positioning it as a background image?
html {
margin:0;
padding:0;
height:100%;
background:#fff url("//imgur.com/qJMrs.png") 2em 50% fixed no-repeat;
}
Demo: jsfiddle.net/Marcel/SMs9j (fullscreen)