Hi folks,

I have a page that contains three profiles in a subgrid row - each in its own column with a mugshot picture, and small hero below containing name (header), city-state (tagline-1), years experience (tagline-2).

Picture has a local image and an ID assigned.
The (small hero header) has its own ID, and each tagline has a unique ID.

I created a php mysqli service to snag the desired content for these three profiles and send it back as an XML.

I have a javascript that does an asynchronous XMLHttpRequest 'GET', then it updates the HTML DOM elements appropriately.

The small hero elements play nice.

The image does not. Reason being - when I assign the ID for the picture element, it gets associated with a <div> that is a grandparent of the <img> tag that I need to alter a property of. So a GetElementById("mypic-1").src = newpic does NOT work because the div doesn't know what I am talking about - the property is undefined.

Quick and dirty fix - manually edit the html file - cut and paste the ID into the <img> tag. This works SORT OF.

Problem being RSD assigns the relative URL information to the srcset property and puts a long-winded bit of information about the type of image into the src property src="nodata...image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

So I go after the srcset property instead and that works... SORT OF. FireFox is happy, IE 11 ignores the attempt to alter srcset.

So I changed the javascript to alter the src property and now IE 11 shows the picture but FIRE FOX DOES NOT!

For now - the fix has been - manually edit kill the src property, change the srcset to be the src. ONLY THEN do I get both Firefox and IE 11 showing me the updated images.

THE QUESTIONS!

#1. Since RSD is not giving me an ID associated with the IMG tag - has anybody solved this dilemma - by crawling down the DOM from grandpa to parent to child and getting a reference to the <IMG> tag that allows them to programmatically change the src property?

#2. Since swapping out the images addressing src or srcset leaves the page broken, if I could get a reference to the <IMG> tag - would the best approach be to change BOTH tags to the relative reference of the graphic file? Or would that break something else?



Sincerely,
Gordon

UPDATE - I have found a usable way to navigate the dom and get at the img tag properties... where the <div id="pic-1"> tag is the grandpa, the <picture> tag is the parent, and the <img> tag is the child I want to target.

document.GetElementById("pic-1").firstElementChild.firstElementChild.src = myNewPic.png;

However IE is not playing nice when I try to alter the srcset property - it will alter the src but since RSD is tucking the graphic path/filename into srcset - altering src doesn't update the IE browser image (altering srcset does work in FireFox)

Bottom line - for now, I still have to manually edit the img tag. <sigh>

Sincerely,
Gordon

.