Overlap equal sized images completely on top of another image - javascript

I am a beginning web developer and I want to overlap two images completely on top of one another. I am developing an application that checks to see if an answer inputed into the application is correct or not. For each answer, I will either display a checkmark or an "X" mark for the correct/incorrect answers respectively. To do this, I will use CSS and JavaScript:
CSS:
#checkmark { visibility: hidden}
#xmark {visibility:visible}
JavaScript:
function showCorrect(input, ans) {
if (input == ans) {
document.getElementById('checkmark').style.visibility=visible;
}
}
To do this, I just want to make the checkmark visible so that it covers up the xmark completely. What is the simplest way to overlay the images completely one on top of the either so that the checkmark covers the "X" mark?

How to make images overlap:
.imagewrapper {
position:relative;}
.imagewrapper img {
position:absolute;
top:0px;
left:0px;
}
.img1 {
z-index:1
}
.img2 {
z-index:2;
}
HTML
<div class="imagewrapper">
<img class="img1" src="img1.jpg" />
<img class="img2" src="img2.jpg" />
</div>
This will make the images overlap.
Zindex controls which image is on top.
Alternatively, you could also use display:none; and display:block; in your js or even change the z-index.
If you use display you wont need to overlap anything.

Related

Mouse Hover Bringing Temp Horizontal Scrollbar In jQuery SlideShow

Here's what I am seeing. Please look into the picture below and you will see a horizontal scrollbar beneath the slideshow.
And here's the script on HTML page:
<div class="fitimage">
<div class="imgcontainer">
<img src="img/copywrtng.jpg" class="headerimage" alt="copywriting" />
<img src="img/copywrtng1.jpg" class="headerimage" alt="copywriting" />
<img src="img/copywrtng2.jpg" class="headerimage" alt="copywriting" />
</div>
</div>
And here's what I have on CSS:
div.fitimage {
width:100%;
height:93vh;
overflow: hidden;
}
.imgcontainer {
width:100%;
white-space:nowrap;
}
img.headerimage {
padding: 0;
margin:0 auto;
width:100%;
/*max-height:100%;
max-width:100%;*/
height:93vh;
}
A few things that I cannot understand:
1. It happens only on mouse hover.
2. It happens only for a few seconds and then it disappears, and reappears again.
3. It doesn't happen when I see the local web page. It happens only when I uploaded it on a server.
I tried to figure out if the overflow is turning visible, as soon as the mouse is hovering over it. But what I saw is, a white space is being widened on the right which is rendering the horizontal scroll bar. But the width of the website is still 100%, and whole website is shifting left with white space on the right. And the slideshow block (the website block) is automatically moving right. The white space is being narrowed again and the whole thing fitting into 100% width.
Just don't understand what's changing when it's loaded on server. Is it some predetermined browser style? Or is it a jQuery glitch?
Any help will be appreciated.

PNG images overlaid but with a link to change each, one at a time - Javascript/jQuery/CSS

I am really struggling with this. I have a small amount of knowledge of coding like this, but more modifying than actual coding.
I am looking for some code to allow me to overlay 2 different layers of PNG images (a door and a door handle) which will then each change to a different image when a link is clicked on the page, e.g. a different handle or a different door style or colour.
#png1 {
position:absolute;
top:0;
left:0;
z-index:0;
}
#png2 {
position:absolute;
top:0;
left:0;
z-index:0;
}
The above CSS combined with the below HTML gives me the overlay, it would just be nice to get it in a frame (DIV maybe?) and then for a HTML link to then change the image
<img id="png1" src="aub.png" />
<img id="png2" src="handle1.png" />
position:absolute and z-index css property are your tools
door handle must have supperior z-index than door
use jQuery to the behaviour to change it by clicking a link
Add a wrapper div around the images. Set it to position relative. Give the image you want on top a higher z-index than the one you want on the bottom.
Use the jQuery click function to change the src of the image tag or to show/hide other images.
Assuming you create two links with the classes of .my_link_1 and .my_link_2 to act as the triggers for the images you want to change:
$(".my_link_1").click(function() {
$("#png1").attr('src', 'red.png');
});
$(".my_link_2").click(function() {
$("#png1").attr('src', 'blue.png');
});

Changing image on hover

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.

a jQuery image-group animation

I've got a div with three same images.
<div>
<img class="movlights" src="files/images/movelights.png" alt="10 years logo" />
<img class="movlights sec" src="files/images/movelights.png" alt="10 years logo" />
<img class="movlights third" src="files/images/movelights.png" alt="10 yearslogo"/>
</div>
Each has different "absolute" position in a way that all form a row and their parent div is
overflowed - hidden.
So I animate them moving together simultaneously as a group from left to right with this code:
$(function(){
movelights();
});
function movelights(){
for(x=0;x<3;x++)
{
$('div img:eq('+x+')').animate({left: (1400 - x*800)},24000);
}
};
My problem is:
How to return an image on a certain starting position before the others by queuing it again when it passes the div's right edge so that the animated pattern repeats itself!
So I'm interested in both:
how to queue image from end of the
line to beginning
how to loop the animated pattern
Hope I was clear enough English isn't my native language.
Here's some additional code:
div{
width:1000px;
overflow:hidden;
position:relative;
}
all img{
display:block;
position:absolute;
left:120px;
}
img2{
left:-678px;
}
img3{
left:-1400px;
}
I had the same problem. Try using timer = setTimeout(functionname to loop, 0);.
Whenever I ask a jQuery question someone usually responds with a link to some bloated plugin someone else built. The question was how to do something not where to download something.

make html image area ‘coord’ blinking or glow …

i trying to make html image <area coord tag more clear to viewer. any javascript sample to make those coordinate blinking effect or similar as long as it each coord is clear to viewer?
p/s: problem with paste < area .that why you didn't see the full of my message.sorry repost
i haven't tested this as i don't have time right now but you should be able to make it stand out just with CSS, something like this:
area {
filter:Glow(color=#00FF00,strength=4);
text-decoration: blink;
}
Two slutions: one, overlay another image. The overlay image would be transparent except for the region you want to highlight, and with opacity set low enough to still see what is behind it. And two, use the real image as the background image to the aforementioned 'overlay' image (the overlay image must have the overlay region already be translucent instead of using css).
e.g. (version one)
<span class='image_container'>
<img id='base_image' src='base.png' >
<img id='overlay_image' src='overlayimage.png' usemap='#yourmaphere'>
<map name='yourmaphere'>
...
</map>
</span>
.image_container {
position:relative;
}
#overlay_image {
position:absolute;
top:0;
left:0;
opacity:0.5;
filter: alpha(opacity = 50);
/* text-decoration: blink; */ /*optional*/
}
e.g. (version two)
<img id='base_image' src='overlayimage.png' usemap='#yourmaphere'>
<map name='yourmaphere'>
...
</map>
#base_image {
background: transparent url(base.png) no-repeat scroll top left;
}

Categories

Resources