CODEWITHSUNDEEP
javascriptimage
Often Right
Often Right

Reputation: 425

Javascript position an image over another

I have the below source and what I want to do is have an image appear if a certain code is entered. The trick is that I need the image to be on top of another image. Any way to do this?

var roomCode = prompt("Please enter the room code", "Enter room code here");
        if(roomCode==='102')
        {
            /*I want the image to appear at certain coordinates (on top of another image).*/
        }

Upvotes: 0

Views: 66

Answers (2)

derek_duncan
derek_duncan

Reputation: 1377

Just replace the previous image's src attribute with your new image's path.

Example:

HTML

<img id="replacable-img" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" width="400px" alt="Original image">
<button id="change">Next Image</button> // Just example trigger

Javascript

var img = document.getElementById('replacable-img');
var button = document.getElementById('change');

change.onclick = function(e) {
  img.setAttribute('src', 'http://www.wired.com/images_blogs/wiredscience/2012/10/kitten-kisses-dog.jpg')
}

Just use element.setAttribute('src', 'PATH') within each if block :)

And here's an example: http://jsbin.com/cefutaqo/1/

Upvotes: 1

SPEC
SPEC

Reputation: 75

Initially create an html page and even image in it. Set image display property as none.

try this,

var roomCode = prompt("Please enter the room code", "Enter room code here");
        if(roomCode==='102')
        {
              load(roomCode+".html");
              $('.image').css('display',block)
        }

Upvotes: 0

Related Questions