need a bit of help with

hi Just need to know the right syntax to use a  'script writer' to show different images when using a 'select option' menu <img src="https:// . . .png">     i.e. <img src=@{http}>               setAttrs({classes: 'DRUID',                 Mana: '3',                 Health: '4',                 name: 'Zuri',                 http: 'https// . . .png',   (this would be a pic that is to be changed)         Ability: 'May return 1 discarded potion to your inventory.',                 Shadow: 'Increase each Animal Form track by +1 and +1 Mana.'}); On a similar note.. is it possable to do the same thing on the character bio page image and token ??? again what syntax? thanks

<a href="https://wiki.roll20.net/Image_use_in_character_sheets#Dynamic_Image_Source" rel="nofollow">https://wiki.roll20.net/Image_use_in_character_sheets#Dynamic_Image_Source</a>

Are you putting the javascript directly in the html like that? In case you are, you need to create a script block that looks like this: &lt;script type="text/worker"&gt; &lt;/script&gt; And all sheet workers and jaascript go between those two script lines. Also, just in case, this part has to go inside some kind of worker: &nbsp;setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c lasses: 'D RUID', &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Mana: '3', &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Health: '4', &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'Zuri', &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; http: 'https// . . .png',&nbsp; &nbsp;(this would be a pic that is to be changed) &nbsp; &nbsp; &nbsp; &nbsp; Ability: 'May return 1 discarded potion to your inventory.', &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Shadow: 'Increase each Animal Form track by +1 and +1 Mana.' }); also having an attribute named http might be a bad idea.

my html script writer is fine..&nbsp; just wanted to work out how to use the setAttrs to change pictures according to the selection on a 'select. option' menu. the http: i can easily change.... this is my issue &lt;img src="https:// . . .png"&gt;&nbsp; &nbsp; thats a normal image &nbsp; &nbsp; &nbsp;i.e. &lt;img src=@{http}&gt;&nbsp; &nbsp;will this work if the https// is in a setAttrs???

You cant directly change the html (no javascript fanciness of that sort here), so your best bet is using CSS. Have several different img's encoded in html, and use CSS to set which one is visible.

&nbsp; here is a bit of my code.. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select name="attr_hand" style="font-size: 15px; text-align: center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="0"&gt; -- STARTER -- &lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="tribal"&gt;Tribal Spear&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="rusty"&gt;Rusty Sword&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="ash"&gt;Ash Wand&lt;/option&gt; etc. &lt;/select&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-2column" style="width: 100%"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col" style="width: 49%"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=@{hand_picture} style="height: 100px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col" style="width: 49%"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4&gt;DICE&lt;/h4&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span name="attr_hand_dice"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4&gt;ABILITY&lt;/h4&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span name="attr_hand_ability"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &lt;script type="text/worker"&gt; &nbsp; &nbsp; on("change:hand", function() { &nbsp; &nbsp; &nbsp; &nbsp; getAttrs(["hand"], function(setting) { &nbsp; &nbsp; &nbsp; &nbsp; if (setting.hand === "tribal") { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;setAttrs({hand_dice: "MELEE: +1 Yellow or RANGED: +1 Yellow.", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hand_ability: "Max range =2 Zones.", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hand_picture: "<a href="https://i.imgur.com/wIk3xSV.jpg" rel="nofollow">https://i.imgur.com/wIk3xSV.jpg</a>", hand_set: "-"}); &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; else if (setting.hand === "rusty") { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;setAttrs({hand_dice: "MELEE: +1 Yellow.", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hand_ability: "ATTACK: +1 reroll.", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hand_picture: "<a href="https://i.imgur.com/3hyeATP.jpg" rel="nofollow">https://i.imgur.com/3hyeATP.jpg</a>", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hand_set: "-"}); &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; else if (setting.hand === "ash") { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;setAttrs({hand_dice: "SPELL: +1 Yellow.", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hand_ability: "ATTACK -1 Mana: +1 Sword.", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hand_picture: "<a href="https://i.imgur.com/t4bzr1x.jpg" rel="nofollow">https://i.imgur.com/t4bzr1x.jpg</a>", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hand_set: "-"}); &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp;etc. &lt;/script&gt; these are the pics i'm trying to display .. there are about 200 different pics in 5 different 'select option' menus the pics are on-line.. (not all 200 yet!) what way can it easily be done?? thanks

Unfortunately it can't be done that way. You can't set html src in sheet workers. One way to do is through a combination of HTML, CSS, and sheet worker. Have your src (all of them) defined in html, and give each a CSS class, and have a hidden attribute before them with a class, like follows. &lt;input type="hidden" name="attr_hand_picture" value="tribal" class="toggle-picture"&gt; &lt;img src=" <a href="https://i.imgur.com/wIk3xSV.jpg" rel="nofollow">https://i.imgur.com/wIk3xSV.jpg</a> ", class="tribal" style="height: 100px"&gt; &lt;img src=" <a href="https://i.imgur.com/3hyeATP.jpg" rel="nofollow">https://i.imgur.com/3hyeATP.jpg</a> ", class="rusty" style="height: 100px"&gt; &lt;img src=" <a href="https://i.imgur.com/t4bzr1x.jpg" rel="nofollow">https://i.imgur.com/t4bzr1x.jpg</a> ", class="ash" style="height: 100px"&gt; Then a set of CSS rules like this: input.toggle-picture:not([value="tribal"]) ~ img.tribal, input.toggle-picture:not([value="rusty"]) ~ img.rusty, input.toggle-picture:not([value="ash"]) ~ img.ash { display: none; } In this CSS rule, if the hidden input does not have a value that matches the class, that image is hidden. You also have your select somewhere like this: &lt;select name="attr_hand"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="-"&gt; -- STARTER -- &lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="tribal"&gt;Tribal Spear&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="rusty"&gt;Rusty Sword&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="ash"&gt;Ash Wand&lt;/option&gt; &lt; /select&gt; Add whatever styling you need. Finally, to bring it all together, a sheet worker that sets the value: &lt;script type="text/worker"&gt; &nbsp; &nbsp; on(" change:hand", funct ion() { &nbsp; &nbsp; &nbsp; &nbsp; getAttrs(["hand"], function(setting) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;setAttrs({hand_picture: setting.hand}); }); }); &lt;/script&gt; It's a bit convoluted, but thats Roll20 for you. I'll expand the sheet worker in the next post to save extra information. This is just for getting the pictures to show up.

So when you have a database, a table of values, it's best to put them in a variable first. Like this: &lt;script type="text/worker"&gt; &nbsp; &nbsp; on(" change:hand", funct ion() { &nbsp; &nbsp; &nbsp; &nbsp; getAttrs(["hand"], function(setting) { const pictures = { "-": {/* default values */}, rusty: {hand_dice: "MELEE: +1 Yellow.", hand_ability: "ATTACK: +1 reroll.", hand_picture: "rusty", hand_set: "-"}, ash: {hand_dice: "SPELL: +1 Yellow.", hand_ability: "ATTACK -1 Mana: +1 Sword.", hand_picture: "rusty", hand_set: "-"}, tribal: /* whatever */ }; const hand_type = setting.hand; const output = pictures[hand_type]; setAttrs(output); }); }); &lt;/script&gt; In this worker, you have a value in hand. hand_type gets that value. That perfectly matches one of rows of stats in the pictures table. That table has all the attributes you need in the same format expected by setAttrs, so you can send it dorectly to setAttrs.

I just corrected a few copy/paste errors in the first post, if you already saw it.

I'd also recommend replacing your inline styles with classes. Instead of something like this: &lt;input type="hidden" name="attr_hand_picture" value="tribal" class="toggle-picture"&gt; &lt;img src=" <a href="https://i.imgur.com/wIk3xSV.jpg" rel="nofollow">https://i.imgur.com/wIk3xSV.jpg</a> ", class="tribal" style="height: 100px"&gt; &lt;img src=" <a href="https://i.imgur.com/3hyeATP.jpg" rel="nofollow">https://i.imgur.com/3hyeATP.jpg</a> ", class="rusty" style="height: 100px"&gt; &lt;img src=" <a href="https://i.imgur.com/t4bzr1x.jpg" rel="nofollow">https://i.imgur.com/t4bzr1x.jpg</a> ", class="ash" style="height: 100px"&gt; You'd have something like &lt;input type="hidden" name="attr_hand_picture" value="tribal" class="toggle-picture"&gt; &lt;img src=" <a href="https://i.imgur.com/wIk3xSV.jpg" rel="nofollow">https://i.imgur.com/wIk3xSV.jpg</a> ", class="tribal" class="hand-picture"&gt; &lt;img src=" <a href="https://i.imgur.com/3hyeATP.jpg" rel="nofollow">https://i.imgur.com/3hyeATP.jpg</a> ", class="rusty" class="hand-picture"&gt; &lt;img src=" <a href="https://i.imgur.com/t4bzr1x.jpg" rel="nofollow">https://i.imgur.com/t4bzr1x.jpg</a> ", class="ash" class="hand-picture"&gt; Then in your CSS page, you have something like this: img.hand-picture { height: 100px; } (If you are using older style code, that CSS would start img.sheet-hand-picture , because you used to have to put sheet- at the start of each class name - you only need to do this in the CSS, not the HTML). The main reason to do it this way is so that you can change the formatting off all three of those images in just one place (in the class). If you ever want to change sheet dimensions or styling, this is a godsend. Another reason is because it makes CSS declarations much easier to use (though that's harder to explain why). Inline-styles can override other styling in ways that is hard to deal with, so they are best avoided. To summarise: replace all inline styles with classes. You may not see the advantage now, but you'll thank me later.

You can set img srcs via sheetworker as of the image attribute update. You just need to change your img to this: &lt;img src='' name='attr_hand_picture' style="height: 100px"&gt; More info on the wiki:&nbsp;<a href="https://wiki.roll20.net/Image_use_in_character_sheets#Dynamic_Image_Source" rel="nofollow">https://wiki.roll20.net/Image_use_in_character_sheets#Dynamic_Image_Source</a>

THANKS&nbsp; SCOTT C.&nbsp;&nbsp; THATS PERFECT.. thanks GiGs.. also..&nbsp; &nbsp;didn't know you could write the setAttrs like that.. (still a bit more confusing) with the amount i've aready got working nicely.. i won't rewrite it all...

Scott C. said: You can set img srcs via sheetworker as of the image attribute update. You just need to change your img to this: &lt;img src='' name='attr_hand_picture' style="height: 100px"&gt; More info on the wiki:&nbsp; <a href="https://wiki.roll20.net/Image_use_in_character_sheets#Dynamic_Image_Source" rel="nofollow">https://wiki.roll20.net/Image_use_in_character_sheets#Dynamic_Image_Source</a> I misremembered that as just being for BIO images, so I stand corrected!

Yeah, you can't set the avatar or token images, but you can access them.

i understand that the BIO part can't be altered by the char sheet,&nbsp; shame!