Home Ask Login Register

Developers Planet

Your answer is one click away!

joshrt24 February 2016

Won't change image?

Javascript code:

function changeImage(src, imgMap)
    document.getElementById('screenshots').src = src;

    if (imgMap != null)


        var newmap = document.getElementById(imgMap);
        var origin = document.getElementById("map1");
        origin.innerHTML = newmap.innerHTML;

function curser_normal()
    document.body.style.cursor = 'auto';

HTML Code:

<div class="centeredImage">
    <img class="logo" id="screenshots" border="0" src=".\pics\test1.png" usemap="#map1">

<map id="map1">
  <area shape="rect" coords="103,224,169,242" onclick="changeImage('.\pics\test2.png', 'nextpage');" onmouseover="cursor_wait();" onMouseout="curser_normal();">
  <area shape="rect" coords="30,92,56,116" onclick="changeImage('.\pics\test3.png', 'anotherpage');" onmouseover="cursor_wait();" onMouseout="curser_normal();">


Rotan075 February 2016

The problem lies within your function call. It is not possible to give an url as an argument like you do now. The function will use the following url: .pics est2.png as input. What you can do is the following thing:

change this \:

changeImage('.\pics\test2.png', 'nextpage'); // results in: .pics   est2.png

to /:

changeImage('./pics/test2.png', 'nextpage'); // results in: ./pics/test2.png

In that case you will have it working

Post Status

Asked in February 2016
Viewed 2,214 times
Voted 6
Answered 1 times


Leave an answer

Quote of the day: live life