I've written a simple html and js code to toggle between two images on click but relative url is not working in js code. code which is not working:
<img id="demo" src="one.jpg" ></img>
<script>
var pic = document.getElementById("demo");
function change()
{
if (pic.src == "one.jpg")
{
pic.src="two.jpg";
}
else
{
pic.src="one.jpg";
}
}
</script>
When I changed relative url to absolute its working fine:
<script>
var pic = document.getElementById("demo");
function change()
{
if (pic.src == "file:///D:/javaScript_tut/one.jpg")
{
pic.src="file:///D:/javaScript_tut/two.jpg";
}
else
{
pic.src="file:///D:/javaScript_tut/one.jpg";
}
</script>
replace
if (pic.src == "one.jpg")
with
if(pic.src.indexOf("one.jpg") >= 0)
Related
I'm trying to swap two imgs in my webpage and can't wrap my head around why this code doesn't work. Any help would be appreciated.
This is in the HTML file:
<img onclick="swap(); "src="LaptopThin.jpg" id="LaptopPicture" />
while this is in a seperate javascript file:
function swap()
{
var picture = document.getElementById('LaptopPicture').src;
if (picture === 'LaptopThin.jpg') {
picture.src = 'ServerRack.jpg';
} else {
picture.src = 'LaptopThin.jpg';
}
I changed the code to:
function swap()
{
var picture = document.getElementById('LaptopPicture');
if (picture.src === 'LaptopThin.jpg') {
picture.src = 'ServerRack.jpg';
} else {
picture.src = 'LaptopThin.jpg';
}
}
and the picture is still not changing at all in the html file. The img stays on Laptopthin.jpg
You can't set the src property of picture because you set picture to the src property of an element already.
Change these lines:
var picture = document.getElementById('LaptopPicture').src;
if (picture === 'LaptopThin.jpg') {
to these:
var picture = document.getElementById('LaptopPicture');
if (picture.src === 'LaptopThin.jpg') {
It is because, the src property will give the absolute value of the image source not just the value set by the src attribute
function swap() {
var picture = document.getElementById('LaptopPicture');
if (picture.src.indexOf('LaptopThin.jpg') > -1) {
picture.src = 'ServerRack.jpg';
} else {
picture.src = 'LaptopThin.jpg';
}
}
Another option to try is to use getAttribute
function swap() {
var picture = document.getElementById('LaptopPicture');
if (picture.getAttribute('src')== 'LaptopThin.jpg') {
picture.src = 'ServerRack.jpg';
} else {
picture.src = 'LaptopThin.jpg';
}
}
I have the next code:
<p>
<img alt="" src="imagini/slide1.png"
style="height: 64px; width: 64px" id="imgClickAndChange"
onclick="changeImage()" />
</p>
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "imagini/slide1.png")
{
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
}
else
{
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
}
}
</script>
That is changing an image (phase 1) after clicking on it into another image(phase 2). I want to link the second image (phase 2) to an index.php page. How do I do that? Is there a way of altering or interfering in the changeImage function.
Use the else block of the if statement you already have to change window.location.
function changeImage() {
if (document.getElementById("imgClickAndChange").src.indexOf("imagini/slide1.png") !== -1) {
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
} else {
window.location = "index.php";
}
}
You could use jQuery to easily attach a click event on the second image only. Or you could have 2 images in the page (one alone and one inside a link) and then hide and show one image or another.
Try something like this:
var myEl = document.getElementById("imgClickAndChange");
var parent = myEl.parentNode();
var link = document.createElement('a');
link.href = 'http://www.google.com';
link.appendChild(myEl);
parent.removeChild(myEl);
myEl.src = "imagini/platform.png";
parent.appendChild(link);
try this
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "imagini/slide1.png")
{
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
}
else
{
document.location.href="index.php";
}
}
I'm trying to make a div visible/invisible using java script. I have a function that is supposed to change the visibility to 'none' if the div is visible and to 'visible' if the div is none. However it doesn't seem to be working. Here is the code:
<script>
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.visibility=='visible')
{
element.style.visibility='hidden';
}
else
{
element.style.visibility='visible';
}
}
</script>
I Tried Your Code and Its Working For me. Please Find Below Code. Set Visibility for the Element initially Otherwise its not working at the beginning.
<script>
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.visibility=='visible')
{
element.style.visibility='hidden';
}
else
{
element.style.visibility='visible';
}
}
</script>
<div id="divTools" style="visibility:visible">
<p>Some Text</p>
</div>
<input type="button" onclick="toggleTools()" value="click" />
Go with
document.getElementById('divTools').style.display = 'block';
document.getElementById('divTools').style.display = 'none';
Try this way:
<script>
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.display!='none')
{
element.style.display='none';
}
else
{
element.style.display='block';
}
}
</script>
But you can use JQuery.
$('#divTools').toggle();
The last thing don't work it's the first time whom charge the page. I check if visibility == '' and this works.
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.visibility=='visible' || element.style.visibility=='')
{
element.style.visibility='hidden';
}
else
{
element.style.visibility='visible';
}
}
live demo: http://jsfiddle.net/Magicianred/9vTeR/1/
Enjoy your code.
The code works, provided you set the visibility initially:
via CSS:
#divTools {
visibility:hidden;
}
jsFiddle example
Or via JavaScript:
document.getElementById('divTools').style.visibility='hidden';
jsFiddle example
I have an image defined as following:
<div id="logo" class="exhibit-flowingFacet">
<div class="wrapper">
<img src="path/to/the/image/logo.png">
</img>
</div>
</div>
I want with a javascript get the image by its src and hide it.
function hideImage() {
if (document.getElementById()
{
if (document.getElementById('logo').getElementsByClassName('wrapper').src=="path/to/the/image/logo.png")
{
document.style.visibility = 'hidden';
}
}
};
hideImage();
But the code didn't work!! any idea?
With jQuery you could write
$('img[src="path/to/the/image/logo.png"]').hide();
Try this script:
function hideImage() {
var path = 'path/to/the/image/logo.png';
var img = document.getElementById('logo').getElementsByTagName('img')[0];
if (img && img.getAttribute('src').indexOf(path) > -1) {
img.style.visibility = 'hidden';
}
}
if (window.addEventListener) {
window.addEventListener('load', hideImage, false);
} else if (window.attachEvent) { // for older IE8-6 compatibility
window.attachEvent('onload', hideImage);
}
JSFiddle
You can try this:-
$('img[src="path/to/the/image/logo.png"]').css("display","none");
or try this:-
this.style.display = "none";
getElementsByClassName('wrapper') is an array, which is why you have to access the src-attribute of the first element - at least in your case.
if (document.getElementById('logo').getElementsByClassName('wrapper')[0].src=="path/to/the/image/logo.png")
You have to make sure you have a link to jquery library in your header using this code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
You could diplay:none in css if you wanted it not to render on the screen, just pass the image source into the function
function hideImage(imageSrc) {
$('img[src=" + imageSrc + "]').css("display","none");
}
and turn it back on using
$('img[src="path/to/the/image/logo.png"]').css("display","block");
This is my html:
<img id="bladder" onclick="changeimage()" src="images/logo_bladder.png" />
and my js:
<script>
cc = 0;
function changeimage() {
if (cc == 0) {
cc = 1;
document.getElementById('bladder').src = "images/logo_bladder_b.png";
}
else {
cc = 0;
document.getElementById('bladder').src = "images/logo_bladder.png";
}
}
</script>
I would like to be able to click anywhere on body – not only on the image! – to change the image. How do I achieve that?
you can try
$(document).ready(function(){
$(body).click(function(){
if (cc==0)
{ cc=1;
document.getElementById('bladder').src="images/logo_bladder_b.png";
}
else
{
cc=0;
document.getElementById('bladder').src="images/logo_bladder.png";
}
});
});
OR
in you <body> tag, add onclick event like:
<body onclick="changeimage()">..</body>