How can i use dropdowns in a webapp to link to an image file per entry for Business catalyst?

Question

I am wanting to use a dropdown in the back end of BC to spit out an image in the front end of the site. For example... Have a list of teams and want to make a "team vs team" display (logos). Wanting to use dropdowns for both sides so that the webapp can be simple for the user.

Rather than using an image field and having to directly link to an image file.

Any ideas as to how i would go about doing this..im guessing JS would be involved.

Cheers

Answer 1

You wouldn't need any script for this, just css and html

In CSS

.teamname1 {background-image:url(/path-to-background-image1);}
.teamname2 {background-image:url(/path-to-background-image2);}
.teamname3 {background-image:url(/path-to-background-image3);}
.teamname4 {background-image:url(/path-to-background-image4);}

In the Webapp Layout

<div class="{tag_webapp dropdown fieldname}"></div>
VS
<div class="{tag_webapp dropdown fieldname2}"></div>

So when the customer selects one of the team names you've set on "Webapp dropdown fieldname" the class for that webapp item will ensure the team picture is set.