Replace img src depending on which div it resides within

in Script development
Subscribe to Replace img src depending on which div it resides within 8 posts, 3 voices



Longhorn User

Code of the page :


<div id="123">
<img src="images/img.gif" border="0" alt="Alt Text">
<a class="username" href="member.php?u=1">Member_Name</a>
</div>

I wish to search by the href(the only unique static identifier within this div, div id is randomized), to determine the div location, and through that, change the img src.

ie. i only want to change images/img.gif to images/img2.gif when it is contained in the same div as member.php?u=1.

at the moment i'm doing something along the lines of

//////////////////////////////////////

var user_elements = document.getElementsByTagName('a');

for(var i=0;i<user_elements>
var user_element = user_elements[i];

if(user_element.href.match(member.php?u=1)){
GM_log('Matched right member');
}
}

//////////////////////////////////////

but I can't even find the right < a > tag.

any advice?

 
dob Scriptwright

var user_elements = document.getElementsByTagName("a"), i, user;
for (i=0; i<user.elements.length; i++) {
	var user = user.elements[i];
	if (user.href.match(/member\.php\?u=1/i)) {
		GM_log("Matched right member");
		user.previousSibling.href = "images/img2.gif";
	}
}

 
Longhorn User

thank you. i was looking for something like user.previousSibling. however java console complains that user is undefined.
did you mean to put _ where you put .?

i changed those . to _, and then java console complained that a previousSibling was null, so i added another conditional. my code currently looks like this


var user_elements = document.getElementsByTagName("a"), i, user;
for (i=0; i<user_elements>
var user = user_elements[i];
if (user.href.match(/member\.php\?u=1/i) && user.previousSibling!=null) {
GM_log("Matched right member");
GM_log(user.previousSibling.src);
user.previousSibling.src = "images/some\-img.gif";
GM_log(user.previousSibling.src);
}
}

however the log says

Matched right member
undefined
undefined

and the image is not being updated.

 
Longhorn User

also, could you explain the last little bit of this line

(user.href.match(/member\.php\?u=1/i)

why are you (what looks to me) appending the iterator value to the end of the search string?

 
Mikado Scriptwright

dob, please stop posting non-working code. It's damn obvious that user.previousSibling is a text node, not to mention that images don't have href attribute.

var xp = document.evaluate('.//a[contains(@href,"member.php?u=1")]/preceding-sibling::img', document, null, 6, null), x;
for (var i = 0; x = xp.snapshotItem(i); i++) x.src = 'images/img2.gif';

 
Longhorn User

thanks mikado, works like a charm. now if i wanted to take the text that < a >Text here< /a > is wrapped around (The 'Text here') portion and make it bold. how would i do that? I'm currently trying

var yp = document.evaluate('.//a[contains(@href,"member.php?u=107270")]', document, null, 6, null), y;
for(i = 0; y = yp.snapshotItem(i); i++){
GM_log(y);
y=y.style.fontweight=700;
//y=y.bold;
}

to no effect. also, yp has something like 6 elements (at least for the page i'm working with), is it possible to isolate the one that has the img inthe preceding sibling?

something like

if(yp.preceding-sibling.type==img){
y=yp[i];
y=y.bold
}

 
Mikado Scriptwright

var xp = document.evaluate('.//img/following-sibling::a[contains(@href,"member.php?u=107270")]', document, null, 6, null), x;
for (var i = 0; x = xp.snapshotItem(i); i++) x.style.fontWeight = 'bold';

To stop asking about every single line I recommend you to read the xpath reference and use DOM Inspector extension to discover available elements' properties.

 
dob Scriptwright

Mikado wrote:

dob, please stop posting non-working code. It's damn obvious that user.previousSibling is a text node, not to mention that images don't have href attribute.

Wasn't so damn obvious to me.