We Keep Coding

Hovering over text and display image in another div and the image stays

I am facing a lot of problem in my attempt to display image in another div when someone hover over a text. I have a menu where there is a list of 5 text lines. I want to display different images at the same position for each hover over these text lines. I managed to display images on hover with CSS but they disappear on unhovering. I want that the images stays after a user hovered over one text and then when the user hovers over another text, related image gets displayed at the same position. I tried some other layout as well but that was not responsive to device size.
Here is my current code:
<p><style>
.parent > p:hover:after {
width: 5px;
content: url(image1.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent1 > p:hover:after {
width: 5px;
content: url(image2.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent2 > p:hover:after {
width: 5px;
content: url(image3.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent3 > p:hover:after {
width: 5px;
content: url(image4.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent4 > p:hover:after {
width: 5px;
content: url(image5.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
</style></p>
<div class="parent">
<p style="padding-left: 320px;"><strong>menuitem1</strong></p>
</div>
<div class="parent1">
<p style="padding-left: 320px;"><strong>menuitem2</strong></p>
</div>
<div class="parent2">
<p style="padding-left: 320px;"><strong>menuitem3</strong></p>
</div>
<div class="parent3">
<p style="padding-left: 320px;"><strong>menuitem4</strong></p>
</div>
<div class="parent4">
<p style="padding-left: 320px;"><strong>menuitem5</strong></p>
</div>
I am sorry if I made some mistake. My technical knowledge is not that much.

The only way to do this is through using JavaScript and the mouseOver function, Set the display to none and once the h1 is hovered over it runs the function mouseOver() which sets the span display to block(visible). You can also set the state after such as adding a class to the span which makes it close after a couple of seconds automatically.
<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">Mouse
over
me</h1>
<span id="span" style="display:none;">Hey! Click me to close</span>
<script>
function mouseOver() {
document.getElementById("span").style.display = "block";
}
function mouseOut() {
}
window.onclick = function(event) {
if (event.target == span) {
span.style.display = "none";
}
}
</script>

function setURL(newUrl){
var url=newUrl;
return function(){
document.getElementById('picture').setAttribute('src',url);
}
}
document.getElementById('text1').addEventListener('mouseover',setURL('https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg'));
document.getElementById('text2').addEventListener('mouseover',setURL('https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg'));
.container{
width:200px;
display:flex;
margin-left:auto;
margin-right:auto;
}
.container > div{
width:50%;
}
img{
width:30px;
height:30px;
}
<div class="container">
<div>
<p id="text1">picture1</p>
<p id="text2">picture2</p>
</div><!--END TEXT-->
<div>
<img id="picture" src="">
</div><!--END PICTURE-->
</div><!--END CONTAINER-->

Show image on click, modifying image positioning

So, here's what I'm trying to do... I want to create a checklist, and when a box is checked, then the corresponding image appears (by default each image is set to hide). Here is the code that partially works:
http://jsfiddle.net/rpt8ck6L/1/
HTML/Javascript:
<script>
function toggleVisibility(id) {
var el = document.getElementById(id);
if (el.style.visibility == "visible") {
el.style.visibility = "hidden";
} else {
el.style.visibility = "visible";
}
}
</script>
<label for="001">001</label>
<input type="checkbox" id="001" onChange="toggleVisibility('img001');" />
<br/>
<label for="002">002</label>
<input type="checkbox" id="002" onChange="toggleVisibility('img002');" />
<hr/>
<div class="testclass">
<img id="img001" src="http://tinyurl.com/n6amvuw" width="200" height="200" style="visibility:hidden" />
<img id="img002" src="http://tinyurl.com/mm297df" width="200" height="200" style="visibility:hidden" />
</div>
CSS:
.testclass {
border: 1px solid #000;
position: relative;
}
.img001 {
border: 1px solid #f00;
display: block;
position: relative;
z-index: 2;
}
.img002 {
border: 1px solid #0f0;
display: block;
position: relative;
z-index: 1;
top: -12px;
left: 12px;
}
However, I also want the images to overlap one another, so that if two are checked, then the second one will appear on top. In order to have the images overlap, I was told that I had to use CSS styling (with z-index) and image CLASSES, instead of IDs.
So, I just changed the code to use className instead of ID:
http://jsfiddle.net/tbqm1yeo/
HTML/Javascript:
<script>
function toggleVisibility(className) {
var el = document.getElementByClassName(className);
if (el.style.visibility == "visible") {
el.style.visibility = "hidden";
} else {
el.style.visibility = "visible";
}
}
</script>
<label for="001">001</label>
<input type="checkbox" id="001" onChange="toggleVisibility('img001');" />
<br/>
<label for="002">002</label>
<input type="checkbox" id="002" onChange="toggleVisibility('img002');" />
<hr/>
<div class="testclass">
<img class="img001" src="http://tinyurl.com/n6amvuw" width="200" height="200" style="visibility:hidden" />
<img class="img002" src="http://tinyurl.com/mm297df" width="200" height="200" style="visibility:hidden" />
</div>
CSS:
.testclass {
border: 1px solid #000;
position: relative;
}
.img001 {
border: 1px solid #f00;
display: block;
position: relative;
z-index: 2;
}
.img002 {
border: 1px solid #0f0;
display: block;
position: relative;
z-index: 1;
top: -12px;
left: 12px;
}
However, that didn't work (the images don't even appear when checkboxes are checked)... I'm assuming the problem has to do with using className? If someone could get the code from the second link working (so that the images will overlap and appear/disappear when checked), that would be great. Thank you very much.

You can fix your problem just by using position absolute. Your original JavaScript is fine.
Working fiddle: http://jsfiddle.net/rpt8ck6L/2/
CSS:
#img001, #img002 {
width:200px;
height:200px;
position:absolute;
top:80px;
left:0px;
z-index:1;
}
#image002 {
z-index: 2
}

Moving image on click using Javascript?

I have an image at the side of my website, i want to hide most of the image until the user clicks on it (its for a newsletter signup), what would be the best way of going about this?
I just need a section of this image showing, then whenever the user clicks on it the whole image pops out. I know i can use CSS to move the image about, what would the best javascript function to use instead of using the change image function as im only moving the image not changing it?
Example site where this is demonstrated: http://www.plus.de/

Here's a Fiddle
HTML
<div class="slide">
<span class="text">OPEN</span>
</div>
CSS
#overflow {
background: rgba(50,50,50,0.5);
display: none;
width: 100%;
height: 100%;
}
.slide {
background: #0296cc;
position: absolute;
top: 200px;
left: -270px;
width: 300px;
height: 180px;
z-index: 9999;
}
.text {
display: block;
width: 180px;
margin: 80px 0 0 196px;
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-align: center;
letter-spacing: 3px;
color: #fff;
cursor: pointer;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
jQuery
$(function() {
$('.slide').click(function() {
var overflow = ('<div id="overflow"><div>');
$(this).stop().animate({ left: '0' }, 650);
if($('#overflow').length < 1) {
$('body').append(overflow);
}
$('#overflow').fadeIn('slow');
$('#overflow').click(function() {
$(this).fadeOut('slow')
$('.slide').stop().animate({ left: '-270px' }, 650);
});
// Prevents window scroll when overflow is visible
$('#overflow').bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
});
});

BASIC DEMO
<div id="gallery">
<img src="images/img1.jpg" alt="" />
<img src="images/img2.jpg" alt="" />
<img src="images/img3.jpg" alt="" />
<img src="images/img4.jpg" alt="" />
<div id="tabs">
<div>Tab 1</div>
<div>Tab 2</div>
<div>Tab 3</div>
<div>Tab 4</div>
</div>
</div>
CSS:
#gallery{
position:relative;
margin:0 auto;
width:500px;
height:200px;
background:#eee;
}
#gallery > img{
position:absolute;
top:0;
margin:0;
vertical-align:middle;
}
#gallery > img + img{
display:none;
}
#tabs{
position:absolute;
top:0px;
right:0;
height:200px;
width:100px;
}
#tabs > div{
cursor:pointer;
height:49px;
border-bottom:1px solid #ddd;
}
jQuery
$('#tabs > div').click(function(){
var i = $(this).index();
$('#gallery > img').stop().fadeTo(300,0).eq(i).fadeTo(500,1);
});

Unable to draw using selected colour

Description: I have a canvas drawing in my page, here is the coding. I would like to let the users to choose colour and draw. I already have the colour choices.
Problem: Unable to draw using selected colour. I failed to do the function. Please help.
p.s. By clicking the button the canvas will popup.
Demo: jsfiddle
<button onClick="openPopup();">click here</button>
<div id="test" class="popup">
<div></div>
<div class="cancel" onclick="closePopup();"></div>
<canvas id="canvas1" width="750" height="720" style="border: 1px solid black">
</canvas>
<p> </p>
<p>
<input type="button" id="Orange" style="background-color: orange; width: 25px;
height: 25px;"/>
<input type="button" id="Yellow" style="background-color: yellow; width: 25px;
height: 25px;"/>
<input type="button" id="Green" style="background-color: green; width: 25px;
height: 25px;"/>
<input type="button" id="Blue" style="background-color: blue; width: 25px;
height: 25px;"/>
<input type="button" id="Purple" style="background-color: purple; width: 25px;
height: 25px;"/>
<input type="button" id="Brown" style="background-color: brown; width: 25px;
height: 25px;"/>
<input type="button" id="Black" style="background-color: black; width: 25px;
height: 25px;"/>
<input type="button" id="White" style="background-color: white; width: 25px;
height: 25px;"/>
</p>
<p><input type="button" id="reset_image" value="Reset Drawing"/></p>
</div>
<style>
#canvas1 {
left:0; /* adjust as needed */
top:0;
}
.popup{
position:absolute;
top:0px;
left:0px;
margin:0px;
width: 900px;
height: 750px;
font-family:verdana;
font-size:13px;
background-color:white;
border:2px solid grey;
z-index:100000000000000000;
display:none;
opacity:0.6;
filter:alpha(opacity=60);
margin-left: 300px;
margin-top: 90px;
overflow: auto;
}
.cancel{
display:relative;
cursor:pointer;
margin:0;
float:right;
height:10px;
width:14px;
padding:0 0 5px 0;
background-color:red;
text-align:center;
font-weight:bold;
font-size:11px;
color:white;
border-radius:3px;
z-index:100000000000000000;
}
.cancel:hover{
background:rgb(255,50,50);
}
</style>
<script>
function openPopup() {
var p = document.getElementById('test');
p.style.display = 'block';
canvas.width = parseInt(p.style.width, '10'); //only when you use pixels
canvas.height = parseInt(p.style.height, '10');
}
function closePopup() {
document.getElementById('test').style.display = 'none';
}
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var isPressed = false;
var mx = 4, my = 4;
function move(e) {
getMouse(e);
if (isPressed) {
ctx.lineTo(mx, my);
ctx.stroke()
}
}
function up(e) {
getMouse(e);
isPressed = false;
}
function down(e) {
getMouse(e);
ctx.beginPath();
ctx.moveTo(mx, my);
isPressed = true;
}
can.onmousemove = move;
can.onmousedown = down;
can.onmouseup = up;
// way oversimplified:
function getMouse(e) {
var element = can, offsetX = 0, offsetY = 0;
mx = e.pageX - 305;
my = e.pageY - 95;
}
</script>

Just add this function to every onclick event of a button:-
function choosecolor(cps) {
ctx.strokeStyle = cps; // choosen color
}
Add an onclick event to every button like this:-
<input type="button" onclick="choosecolor('yellow color code')" id="Yellow" style="background-color: yellow; width: 25px;
height: 25px;"/>
See this working fiddle :- Fiddle

change image in a div with any effect like fadein when mouse hovered on another div

The below shown is the format of my html code. In the header div i have a image. Each box(box1, box2, box3) inside the contain div has link inside like(software development(box1), Graphic Designing(box2), and Technical Training(box3). These links when clicked will take me to separate pages which has their own header images. So i have 3 header image for each box and a default header image in the home page.In the home page when ever I hover my mouse in the box1 div the header image should change to the box1 header image with an effect like fadeIn and return my default image on mouse out. Same for box2 and box3. Please help me with doing this with CSS or JS or jQuery. Thank You
<body>
<div class="wrapper">
<div class="out">
<div class="in">
<div id="header"></div>
<div class="contain">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</div>
</div>
</body>
css:
.wrapper{
width: 100%
height: auto;
margin: 0px;
}
.out{
margin: auto;
width: 1000px;
height: 730px;
border-top: 5px solid #333333;
}
.in{
width: 900px;
height: 640px;
margin: auto;
margin-top: 25px;
}
#header{
background:url(../img/Untitled-1.jpg);
height: 175px;
width: 900px;
margin: 0px;
}
.contain{
margin: 0px;
width: 900px;
height: 428px;
}
.box1{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 0px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
.box2{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 302px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
.box3{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 602px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}

I have a made an BIN
I am placing same image for all the 3 divs like
$('#content,#content2,#content3').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});
You change with your respective images like
$('#content').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});
$('#content2').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});....

jsBin demo
jQuery:
var currPage = 0; // PLAY HERE: set here current page (0 = home)
var $header = $('#header');
var $headerImg = $header.find('img');
$headerImg.eq( currPage ).show().addClass('currentImg');
// clone images to boxes:
var c = 0;
$('.box').each(function( i ){
$(this).prepend( $headerImg.eq(i==currPage? (i+1+c++) : c+i).clone() );
});
$('.box img[class^=headImg]').on('mouseenter mouseleave', function( e ){
var opacity = e.type=='mouseenter' ? 1 : 0 ;
var myClass = $(this).prop('class'); // get class
var $mainImg = $header.find('img.'+myClass);
$headerImg.hide();
$mainImg.stop().fadeTo(300, opacity);
$('.currentImg').stop().fadeTo(600, !opacity);
});
HTML:
<div class="wrapper">
<div class="out">
<div class="in">
<div id="header">
<img class="headImg1" src="home.jpg" alt="" />
<img class="headImg2" src="ONE.jpg" alt="" />
<img class="headImg3" src="TWO.jpg" alt="" />
<img class="headImg4" src="THREE.jpg" alt="" />
</div>
<div class="contain">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
</div>
</div>
MODIFIED CSS PART:
/*ADDED*/
#header img{
position:absolute;
display:none;
}
.contain{
margin: 0px;
width: 900px;
height: 428px;
}
.box{ /* CHANGED */
height: 360px;
width: 294px;
float: left;
margin: 67px 3px 0px;
position: relative;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
/* ADDED */
.box img{
width:100%;
}

See this : http://jsfiddle.net/xTjQT/2/
$('a').mouseover(function() {
var src = $(this).attr('alt');
alert(src);
$('#header img').stop().fadeOut(100, function() {
$(this).attr('src', src);
$(this).fadeIn(100);
});
});
$('a').mouseout(function() {
$('#header img').stop().fadeOut(200, function() {
$(this).attr('src', 'http://jsfiddle.net/img/logo.png');
$(this).fadeIn(100);
});
});