i am new to java script and i am designing my web site but i want to load a new image on a particular place of my web page when a user hover over the home,here is the code.
<html>
<head>
</head>
<body>
<img src="yourImage.jpg" alt="Home" id="image1" onmouseover="image1.src='home.jpg';" onmouseout="image1.src='myImage.jpg';" /> <br />
Hoover Me!
</body>
</html>
This code is not working.Please Help me to find out the error in code.
You have to use the method document.getElementById() to get the image object before try to manipulate it:
<body>
<img src="yourImage.jpg" alt="Home" id="image1" onmouseover="document.getElementById('image1').src='home.jpg';" onmouseout="document.getElementById('image1').src='myImage.jpg';" /> <br />
Hoover Me!
</body>
You should consider using JQuery to do this kind of stuff.
image1 doesn't have any meaning. You will need to use
document.getElementById('image1').src instead of just image1.src.
You're missing the starting quote for the onmouseover attribute of
the a tag.
In addition to not using document.getElementById, you'll also encounter a lag on mouse over, unless the image has been pre-loaded.
You can not refer to the img as image1.src first you have to assign image1=document.getElementById('image1') then you can refer it as image1.src. There is also a much simpler method to do that. You can also refer to the current image or object as this.src in JavaScript. See the corrected code with changes bellow:
<html>
<head>
</head>
<body>
<img src="yourImage.jpg" alt="[ Home ]" id="image1" onmouseover="this.src='home.jpg';" onmouseout="this.src='myImage.jpg';" /><br />
Hoover Me!
</body>
</html>
To access the img element from it's own inline attributes, you need to use the 'this' keyword:
<img src="yourImage.jpg" alt="Home" id="image1" onmouseover="this.src='yourOtherImage.jpg';" />
Rather than do it inline, you could also use a javascript library, like jQuery, as detailed here, which would give you more flexibility if you want to do more later e.g. add animations, but that's up to you and how much of a challenge you feel like :)
Related
How can I change the src attribute of an img tag with a google chart api url?
At first, I've this in the html body.
<img class="image2" />
Then I want to change the src with a chart URL.
So far I've tried with JQuery
$("#image2").attr('src', 'https://chart.googleapis.com/chart?cht=p3&chs=250x100&chd=t:60,40&chl=Hello|World');
Javascript
var image = document.getElementsByClassName("image2");
image.src = "https://chart.googleapis.com/chart?cht=p3&chs=250x100&chd=t:60,40&chl=Hello|World"
However no image is displayed.
Is it possible to do this? Thanks!
when using jquery to select by classname,
use a period instead of pound sign.
<img class="image2" />
$(".image2")
pound sign is for id selector
<img id="image2" />
$("#image2")
see following working snippet...
$(".image2").attr('src', 'https://chart.googleapis.com/chart?cht=p3&chs=250x100&chd=t:60,40&chl=Hello|World');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image2" />
I’ve made a cardspread program that is based on the source of the image. It works allright, but it is loading slowly, because now 78 different cards are loaded. I like to speed up the loading and I thought I needed an extra item per DIV. So I added an ALT-tag to each image. Like this:
<div id="kaart1">
<alt=kaart14.jpg>
<img src="images/kaart1.jpg" width="110" height="180" onclick="showDiv(event)>
</alt=kaart14.jpg>
</div>
Now I need only 1 image to load 78 times, which is faster. The problem which I am facing now is that I want to read the alt value into a variable (in this case: kaart14.jpg).
I’ve tried :
$('.status').click(function() {
var status = $(this).attr('alt');
});
But that stays empty. Does anyone have a suggestion how to solve this in Javascript or jQuery?
First, there is no <alt> tag. It is used as alternative to <img>. The value is displayed if the image is not loaded.
It is just plain text. If you put a url there, it will just display the url and not the image itself.
Eg:
<img src="myphoto.jpg" alt="This is my photo">
There is no performance gain if you use alt or not, but you definitely SEO
Your alt attribute should be like
<div id="kaart1">
<img src="images/kaart1.jpg" alt="kaart Image" width="110" height="180" onclick="showDiv(event)>
</div>
alt is an attribute of the img tag,its not a tag itself.And as #Bergi said,the alt attribute will not be an another image.It may be the description.
I am new for script and jQuery
I’m using a multilanguage script to change from language. Now I'm having troubles to change from a language by using the image,
<img src="/flags/us.png" alt="en_EN" />
<img src="/flags/it.png" alt="it_IT" />
<img src="/flags/fr.png" alt="fr_FR" />
here after i dnot know how to use this image tag
what i want from this image tag , when i am click this image i want the alt value of corresponding image click.
Hoe to get it...
its possible or else give any other idea
thanks
Kumar
Put a class in your anchor and try this
<img src="/flags/us.png" alt="en_EN" />
<img src="/flags/it.png" alt="it_IT" />
<img src="/flags/fr.png" alt="fr_FR" />
$('a.lang img').click(function(){
var alt=$(this).attr('alt');
});
<a class='lang_link' href="#"><img src="/flags/us.png" alt="en_EN" /></a>
Assuming your links have a class of lang_link, you can look inside the link to see what language should be chosen.
$('.lang_link').click(function(){
var lang = $(this).find('img:first').attr('alt');
});
I'm using this jquery plugin which lets you scrub through images:
http://thespiral.ca/jquery/scrubber/demo/
I'm trying to add a link to each image, like this for example:
<div id="basic">
<img src="images/beach1.jpg" width="200" height="200" alt="Beach1" />
<img src="images/beach2.jpg" width="200" height="200" alt="Beach2" />
<img src="images/beach3.jpg" width="200" height="200" alt="Beach3" /></div>
But something in the script seems to be blocking links, and no matter what I do the image have a "#" link.
Can anyone help?
Update:
I put up a jsFiddle: http://jsfiddle.net/qdGXZ/
The problem may be in jquery.cycle.all.min.js. There is a code in it that may cause this kind of behaviour. Here it is:
else{a=''+(i+1)+"";}
Comment it and see what happens. This was the only piece of code in the given example that could cause this.
To fix this you need to pass href attribute defined by you to the else case and do something like this:
else{a=''+(i+1)+"";}
I don't know if this will help. Just can't do much. Now you know what is the problem and what you should do to fix it. The rest is up to you.
im not sure if this is possible or not, but im trying to alter the style of elements contained within an iFrame using javascript.
I have tried the following which I believed in theory should work with no luck...
<script>
function click() {
window.frames[0].document.getElementById('daLink').style.backgroundColor="#000";
}
</script>
<a href="#" onclick="click()" >Test</a>
<iframe src="http://www.google.co.uk" width="600" height="400" id="daLink"></iframe>
That will only work if the iFrame Source is on the same domain.
Your code is not working due to the same-origin-policy!
Read more here: Javascript Security