Change image on hover - html

How can I change this exact code to do the hovering effect on mouseover?
I tried following some of the other questions and answers, but I could not really follow them.
So the HTML is:
<img src="R3.jpg" width=700 height=300 />
<div>
<img src="SSX.jpg" height=100 width=120 />
<img src="MaxPayne3Cover.jpg" height=100 width=120 />
<img src="NC.jpg" height=100 width=120 />
</br>
</div>
Now what I want to do is change the big size image when the mouse hovers over the small images.

Try this it`s so easy and the shortest one, just change the Image's URL:
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</a>

Try the following code. It's working
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
I modified the code, like it will work with some delay in it.. But still, it is not animating..
function changeImage(img){
// document.getElementById('bigImage').src=img;
setTimeout(function() {document.getElementById('bigImage').src=img;},1250);
}

Or do like this:
<a href="SSX.html">
<img src="SSX.jpg"
onmouseover="this.src='SSX2.jpg';"
onmouseout="this.src='SSX.jpg';"
height=100
width=120 />
</a>
I think this is the easiest way.

No JavaScript needed if you are using this technique
<div class="effect">
<img class="image" src="image.jpg" />
<img class="image hover" src="image-hover.jpg" />
</div>
the you will need css to control it
.effect img.image{
/*type your css here which you want to use for both*/
}
.effect:hover img.image{
display:none;
}
.effect img.hover{
display:none;
}
.effect:hover img.hover{
display:block;
}
remember to give some class to div and mention it in your css name to avoid trouble :)

The easiest way for Roll Over image or Mouse Over image for web pages menus
<a href="#" onmouseover="document.myimage1.src='images/ipt_home2.png';"
onmouseout="document.myimage1.src='images/ipt_home1.png';">
<img src="images/ipt_home1.png" name="myimage1" />
</a>

<script type="text/javascript">
function changeImage(img){
img.src=URL_TO_NEW_IMAGE;
}
</script>
<a href="RR.html"><img id="bigImage"
onmouseover="changeImage(document.getElementById('bigImage'));"
src="R3.jpg"
width=700
height=300/></a>
<div>
<a href="SSX.html" ><img src="SSX.jpg" height=100 width=120/></a>
<img src="MaxPayne3Cover.jpg" height=100 width=120/>
<a href="NC.html" ><img src="NC.jpg" height=100 width=120/></a>
</br>
</div>

If you don't want to do Javascript you can use CSS and :hover selector to get the same effect.
Here's how:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Image hover example</title>
</head>
<body>
<div class="change_img"></div>
</body>
</html>
stylesheet.css
.change_img { background-image:url('img.png'); }/*Normal Image*/
.change_img:hover { background-image:url('img_hover.png'); }/*On MouseOver*/

Just Use this:
Example:
<img src="http://nineplanets.org/planets.jpg"
onmouseover="this.src='http://nineplanets.org/planetorder.JPG';"
onmouseout="this.src='http://nineplanets.org/planets.jpg';">
</img>
Works best with the Pictures being the same size.
Copy This
<img src="IMG-1"
onmouseover="this.src='IMG-2';"
onmouseout="this.src='IMG-1';">
</img>

Here is a simplified code sample:
.change_img {
background-image: url(image1.jpg);
}
.change_img:hover {
background-image: url(image2.jpg);
}

Related

html not loading multiple images

I am trying to make an image page for a website and only one of the images loads. Anybody have advice?
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="main2.css">
</head>
<body bgcolor="black">
<h1 style="color:white"> Images </h1>
<div class="row">
<div class="column">
<img src="C:\Users\Scott Jackson\Downloads\boat.jpg" alt="C:\Users\Scott Jackson\Downloads\boat.jpg" class="image1" height="250">
</div>
<div class="column">
<img src="‪‪‪C:\Users\Scott Jackson\Downloads\boat.jpg" alt="C:\Users\Scott Jackson\Downloads\boat.jpg" class="image2" height="250">
</div>
</div>```
[1]: https://i.stack.imgur.com/YYky7.png
move your images to the same directory as your HTML files and change your img tag's src to a relative path, i.e. something like <img src="‪‪‪boat.jpg">

Background image not appearing

The background image in the shadow_div is not appearing as it is expected to be .
Although rest of the images are loading and appearing properly which are in mySlider div
but what about the background-image of the shadow_div?
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
});
</script>
<style type="text/css">
.mySlider
{
width:800px;
height:480px;
overflow:hidden;
margin:10px auto;
}
.shadow_div
{
background-image:url(Images\shadow.png);
background-repeat:no-repeat;
background-position:top;
width:510px;
height:296px;
margin:-90px auto;
}
</style>
</head>
<body>
<div id="my_image_slider" class="mySlider">
<img src="Images\audi.jpg" alt="" title="Audi India"/>
<img src="Images\bmw.jpg" alt="" title="BMW India" />
<img src="Images\aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img src="Images\bugatti.jpg" alt="" title="Buggatti APAC" />
<img src="Images\koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div><br />
<div class="shadow_div" ></div>
</body>
</html>
you are using Backslash \ symbol.
<img src="Images\audi.jpg" alt="" title="Audi India"/>
you should use Forward Slash / Symbol . also make sure image path is right.
<img src="Images/audi.jpg" alt="" title="Audi India"/>
Here you can see the image in class .shadow_div is appearing. See the DEMO.
Your image is not getting correct path: try this below, as you are using forward slash '\'
instead of backslash '/'
<img src="Images/audi.jpg" alt="" title="Audi India"/>
<img src="Image/bmw.jpg" alt="" title="BMW India" />
<img src="Image/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img src="Image/bugatti.jpg" alt="" title="Buggatti APAC" />
<img src="Image/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />

Cannot link image to url (<img> tag inside of <a> tag not working for slideshow)

I have a slideshow and I want to link each slide to some url, which should be easy, but it's not working.
I'm using the slider from here: http://dev7studios.com/lean-slider/
If you don't want to download the code, I guess you can just use inspect element and edit it to test it yourself.
...
<div class="slide1 lean-slider-slide">
<img src="images/1.jpg" alt="" />
</div>
...
I also tried using onclick with javascript with no luck.
<script>
function test(){
document.location.href = 'http://www.google.com';
}
</script>
<img src="images/1.jpg" alt="" onclick="test()" />
I uploaded the default demo version to my website, linking all images to google.com. I have not made any changes to the original code other than adding the links. I assume that you've already tried that but I cannot see what the issue could be. Usually problems like these have to do with paths to scripts and stylesheets but these seem pretty straightforward. At least there's a working example to go by. The code I'm using is below.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8" />
<title>Lean Slider Demo</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../lean-slider.js"></script>
<link rel="stylesheet" href="../lean-slider.css" type="text/css" />
<link rel="stylesheet" href="sample-styles.css" type="text/css" />
</head>
<body>
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
</><img src="images/1.jpg" alt="" />
</div>
<div class="slide2">
<img src="images/2.jpg" alt="" />
</div>
<div class="slide3">
<img src="images/3.jpg" alt="" />
</div>
<div class="slide4">
<img src="images/4.jpg" alt="" />
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var slider = $('#slider').leanSlider({
directionNav: '#slider-direction-nav',
controlNav: '#slider-control-nav'
});
});
</script>
</body>
</html>
Its not working correctly.
Expected is each image can have their own hyperlinks, but with lean-slider, only last hyperlink is applicable with all images.
In you case you have given google.com with each image so it seems it is working fine, but once you change each URL then you will notice that it is not going to last hyperlink.
Thanks,
Krishan
but the solution i cant have diferent URL´s, always take the last link; play with the css you can force the position of elements and enable yhe link for each image:
/*lean slider overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}

Testing website, blank page shows up

When I test web site in IE 5.5, 6.0, 7.0 and 8.0 a blank page loads. The site works fine in Firefox, Safari, Opera and Chrome. I think the problem has something to do with the conditional comments.
Below is my source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chris Schnitzer | Home</title>
<link href="home.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('.homewrap').hover(function() {
$(this).children('.front').stop().animate({ "top" : '200px'}, 500);
}, function() {
$(this).children('.front').stop().animate({ "top" : '0'}, 300);
});
});
</script>
<!--[if IE5]>
<style type="text/css">
/* place haslayout fix for IE 5* in this conditional comment */
#headerright, #mainContenttext, #mainContentrigheducation, #mainContentrightexpertise { height: 1%; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#headerright, #mainContenttext, #mainContentrighteducation, #mainContentrightexpertise { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</syle>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<div id="headerleft"><!-- #BeginLibraryItem "/Library/logo.lbi" -->
<img src="assets/images/logo.png" width="135" height="77" alt="chris schnitzer logo" /><!-- #EndLibraryItem -->
</div>
<div id="headerright">
<div id="topnav"><!-- #BeginLibraryItem "/Library/topnav.lbi" --><ul>
<li>Home|What I Do|Portfolio|Contact Me</li>
</ul><!-- #EndLibraryItem --></div>
</div>
</div>
<div id="greetingandintrowrap">
<div id="greetingtext">Hello, Gutentag, Sawubona!</div>
<div id="intro">
<h4>I am Chris and thank you for taking your time to view my portfolio</h4>
</div>
</div>
<div id="mainContent">
<div id="mainContenthome">
<a href="Whatido/index.html"><div class="homewrap">
<img src="assets/images/whatidohomepgback.png" width="200" height="200" alt="What I Do" />
<img src="assets/images/whatidohomepgfront.png" class="front" width="200" height="200" alt="What I Do" />
</div></a>
<a href="portfolio/index.html"><div class="homewrap">
<img src="assets/images/portfoliohomepgback.png" width="200" height="200" alt="Portfolio" />
<img src="assets/images/portfoliohomepgfront.png" class="front" width="200" height="200" alt="Portfolio" />
</div></a>
<a href="contactme/index.html"><div class="homewrap">
<img src="assets/images/contactmehomepgback.png" width="200" height="200" alt="Contact Me" />
<img src="assets/images/contactmehomepgfront.png" class="front" width="200" height="200" alt="Contact Me" />
</div></a>
<br class="clearfloat" />
</div>
</div>
<div id="footercontent">
<p>I have a <span class="bolddarkblue">passion</span> for designing visually appealing content<span class="bolddarkblue"></span>
that <span class="bolddarkblue">communicates </span> your message whether it is for print or the web using
HTML, CSS, JQuery and Flash to design <span class="bolddarkblue">Standard Compliant</span> websites.</p>
</div>
<div id="footer"><div id="altlogo"><!-- #BeginLibraryItem "/Library/altnav.lbi" -->
<img src="assets/images/smalllogo.png" width="41" height="24" alt="chris schnitzer logo" />
</div>
<div id="altnav">
<ul>
<li>Home</li>
<li>What I Do</li>
<li>Portfolio</li>
<li>Contact Me</li>
</ul>
</div></div><!-- #EndLibraryItem -->
</div>
</body>
</html>
In your last IE conditional comment, you didn’t close the <style> element properly:
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#headerright, #mainContenttext, #mainContentrighteducation, #mainContentrightexpertise { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</syle>
<![endif]-->

Can't see logo in Google Chrome but can in IE and Firefox

Title explains all, I can't see what the issue is personally, I suspected may an issue with the CSS but it looks just fine in IE and Firefox, I don't see why chrome is struggling?
I have tried adding
#logo img
{
width: 50%;
float:left;
}
To try to directly style the image, still no luck
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css.css"/>
<title>Welcome!</title>
</head>
<body>
<div id="header">
<div id ="logo">
<img src="Media/Images/logo.svg" type="image/svg+xml" width="75%" height="142px;" />
</div>
<div id="icons">
<img src="Media/Images/EnvelopeIcon.png" alt="Envelope Icon" height="25" width="30">
<p>M015734a#student.staffs.ac.uk</p>
<div class="clear">
</div>
<img src="Media/Images/PhoneIcon.png" alt="Envelope Icon" height="25" width="30" />
<p> 07904921417</p>
<div class="clear">
</div>
<img src="Media/Images/HouseIcon.png" alt="Envelope Icon" height="25" width="30">
<p>Stafford, UK</p>
<div class="clear">
</div>
<div class="clear">
</div>
</div>
</div>
<nav>
<div id ="NavBG">
safsafnsakn
</div>
</nav>
</body>
</html>
#logo
{
width: 50%;
float:left;
}
#logo img
{
width: 50%;
float:left;
}
There seems to be a workaround to this issue. You can try to use <object> instead of <img>
<object height="100%" width="100%" data="Media/Images/logo.svg" type="image/svg+xml">
</object>
Please also refer to the following links for more details.
http://e.metaclarity.org/52/cross-browser-svg-issues/
http://henkelmann.eu/2010/12/16/display_svg_image_same_size_in_decent_browsers
You can't just append CSS to the end of the file. It has to either be inline, included as an external file, or placed inside style tags in the head.
Try moving the CSS into the head, like so:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css.css"/>
<title>Welcome!</title>
<style>
#logo
{
width: 50%;
float:left;
}
#logo img
{
width: 50%;
float:left;
}
</style>
</head>
If you cannot solve the issue of the logo not appearing in Chrome, please recreate your file in JSFiddle, complete with images and your external css.css file, and post a link here.
Please Use different type of image. Check The link
http://code.google.com/p/chromium/issues/detail?id=119693
Your issue is probably in the img tag:
<img src="Media/Images/logo.svg" type="image/svg+xml" width="75%" height="142px;" />
You can't specify units using the "height" or "width" attributes - I would just remove them entirely and style the image using CSS.
Change your code from link rel="icon" type="image/x-icon" href="/favicon.ico"
to
link rel="icon" type="image/x-icon" href="/favicon.png"
Also rename image to .png. As Chrome doesn't pick the ico icons for sometimes.
It works for me.