CODEWITHSUNDEEP
javascriptphpjqueryhtml
georgian1990
georgian1990

Reputation: 9

JavaScript link to another page

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.

Upvotes: 0

Views: 2728

Answers (4)

dpk2442
dpk2442

Reputation: 701

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";
    }
}

Upvotes: 2

Marin Vartan
Marin Vartan

Reputation: 582

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";
   }
}

Upvotes: 0

Jeff Lambert
Jeff Lambert

Reputation: 24661

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);

Upvotes: 0

siebmanb
siebmanb

Reputation: 807

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.

Upvotes: 0

Related Questions