Change BG-Image of Div onclick


(Thomas) #1

I’m trying to swap a certain Image per Click on a Button. So i gave the Image an ID and since images in hype are div background images i tried the following codelines:

document.getElementById(“ElementId”).style.backgroundImage=imageUrl

… but nothing happens :confused:

Any hints for me?


#2

Probably should wait for a pro to answer, but you could easily do this with scenes or different elements that are hidden using timelines. Would be a quick workaround until you find a clean way to do this.


#3

Hi Thomas,

Welcome to the Forum! One possible approach to a solution…

Hype Project: bg_Image_Change_JHSv1.hype.zip (56.7 KB)

Image swap triggered by an “On MouseClick” event:


function changeBgImage(hypeDocument, element, event) {
var imageSwap = hypeDocument.getElementById('imageHolder');
imageSwap.style.backgroundImage = "url('${resourcesFolderName}/image_2.jpg')";
//syntax: element.style.backgroundImage = "url('path to image')";
}

Note 1
${resourcesFolderName} is a substitution variable for the document’s resources folder. Use this to reference documents added via the Resource Library.

Note 2
As Pappa mentioned in the post just above, consider using Timelines for these kinds of operations. Even if it is not the right technique for your current need, experimenting with the Timeline will prove useful in learning about what Hype’s native interface capabilities can do.


(Thomas) #4

Thank you! that works just perfect!

I have different images which can be selected und the user generates a certain combination… So doing hundreds of timeline based combinations is really not an good option :smiley: