Swap image based on url variable

**knight006** · 11-18-2006, 05:46 PM

hello all,

I need to swap an image based on a url variable.

*Nevermind, I figured it out.*

**bigwebidea** · 08-29-2007, 01:56 AM

Can you or someone show how this is done?

**jscheuer1** · 08-29-2007, 03:14 AM

Let's call it swap_pic.htm:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getQval(n, m) {
/*my n=name, m=searchString(optional)*/
if(!arguments[0]||typeof n!='string')
return null;
var r=new RegExp('[?&;]'+n+'=([^&;#]*)'), m=arguments[1]?m:location.search;
return (m=r.exec(m))? unescape(m[1]) : null;
}
function swap_it(im){
var s=['photo1.jpg', 'photo2.jpg', 'photo3.jpg', 'photo4.jpg', 'photo5.jpg'];
var im=document.images[im];
if (getQval('pic')&&s[getQval('pic')])
im.src=s[getQval('pic')];
}
onload=function(){swap_it('my_image');};
</script>
</head>
<body>
<img id="my_image" src="photo1.jpg">
</body>
</html>

Now you can have what ever images, and however many images you want in the red array. Arrays are numbered internally 0 to whatever. So, if you were to link to this page with - say:

Code:

<a href="swap_pic.htm?pic=2">Link</a>

It will load the image from the 2 position in the array, which is photo3.jpg.

**bigwebidea** · 08-30-2007, 02:05 PM

Thank you sir. Though here is the situation. I should have be more specific the first time. I'm working with an iframe file and the JavaScript code needs be to place in the src file. The iframe has several different subdomains. The JavaScript should determine its parent subdomain then display a specific image.

My limited knowledge wrote the below logic, but my research tells me that this is a security risk and generates a permission denied error. Is what I'm trying to do possible?

var domain = parent.location.href;
var subdomain1 = 'subdomain1.domain.com';
var subdomain2 = 'subdomain2.domain.com';
if(domain = subdomain1)
{document.write("<a href=\"http://www.url.com\" target=\"_blank\"><img src=\'image.gif' width=\"100\" height=\"100\" border=\"0\"></a>");
}
else {
if(domain = subdomain2)
{document.write("<a href=\"http://www.url2.com\" target=\"_blank\"><img src=\'image2.gif' width=\"20\" height=\"20\" border=\"0\"></a>");}
}

**jscheuer1** · 08-30-2007, 03:15 PM

That would be a security violation, but also an error. If there are more than one subdomains to check against, you would need some kind of server side code to deal with the situation. Even then, the configuration of the servers involved would need to be such as to allow it.

Using javascript, the best I think that you can determine from the child page is whether or not the parent domain is the same as the child domain:

Code:

<script type="text/javascript">
try {
var s=parent.location.hostname? parent.location.hostname : 'offsite';
}
catch(e){
var s='offsite';
}
alert(s)
</script>

Thread: Swap image based on url variable

Thread Tools

Search Thread

Swap image based on url variable

Bookmarks

Bookmarks

Posting Permissions