Absolute Image Locations and Master Pages | Tech Off

m1keread
Bored of Captions

Hi Niners,

I have an ASP.NET project with a rough layout as shown below

Default.aspx
Login.aspx
Site.master
web.config
/IMAGES/Image1.jpg
       /Image2.jpg
       /Image3.jpg ...
/Secure/SecurePage1.aspx
       /SecurePage2.aspx
       /SecurePage3.aspx
       /web.config

Loads of stuff left out, but that is the gist of it. All pages use the Master Page, There are password protected pages held within the /Secure folder.

Problem:

My master page uses HTML that includes bith <IMG> tags and Java Script that manipulates the images in the /Images folder.

I cannot get the SRC attrbiute of the <IMG> tag to give me an image that will display for both the "Default.aspx" and "SecurePage1.aspx".

My <IMG> tags look something like (Code from memory, not cut/paste)

<IMG src="/Images/image1.jpg" ... />

It seems that when I use the URI specification

<IMG src="Images/image1.jpg" ... />

The image is displayed in the Default.aspx only. But if I change it to

<IMG src="/Images/image1.jpg" ... />

the image is not displayed in the Default.aspx OR any of the pages in the Secure folder.

I read that putting the "/" at the start will set the URI to be relative to the root of the site, but I just cannot seem to get this to work.

Could anyone point me in the direction of what may be my problem please ?

kind regards

Mike.

p.s.

There are NO ASP.NET Image Server side controls, it is all basic HTML as spat out from Photoshop/GoLive. I would like this to remain if possible, with just a minor URI change for the images.

Rotem Kirshenbaum
The Master Of Cherries

Use "~/Images/Image1.jpg". The "~" means the root of the application.

Rotem

m1keread
Bored of Captions

Thanks Rotem,

I am pretty sure that I tried this in one of my many earlier attempts and it still failed.

I will try again tonight (Not got code at work). Will post pucka example if it fails.

Mike

odujosh
Need Microsoft SUX now!

Many ways to skin this cat (in order of ease):
1)Move to an ASP.NET Image control. Then the '~' will work. Or add the runat attribute to the image tag. The URL will be resolved before it is sent down, so it will look like an absolute path client side.
2)Resolve it a ASP.NET script tag:
<img src="<%=Page.ResolveUrl("~/image/myimage.jpg")>" />
3)You can also use themes include the images in your theme folder then allocate them in a CSS thats in the theme.

I would always recommend resolving URLs at the server. There is no reason not to.

Using img tags in general is a bad move. ASP:IMAGE, ASP:ImageButton, and other controls in ASP.NET cause far less headaches.

m1keread
Bored of Captions

Thanks guys, the "~/" does not work (neither does a "/" at the start. Even though any documentation I read says that they both should take you to the root of the site and go down into the Images folder from there. Unsure why this is.

The <%=Page.ResolveURL("~/Images/Image1.jpg")%>

Works OK for standard HTML <IMG> tags, but I cant seem to get it to work in following codesnippets that I also have in my Photoshop /GoLive generated HTML.

function preloadImages() {

if (document.images) { b_disclosure_o = newImage('/images/b_disclosure-o.jpg'); b_applicants_o = newImage('/images/b_applicants-o.jpg'); b_problems_o = newImage('/Images/b_problems-o.jpg'); b_performance_o = newImage('/images/b_performance-o.jpg'); preloadFlag = true; }

or

onmouseover="changeImages('b_applicants', 'images/b_applicants-o.jpg'); return true;"

Where the "changeImages(...)" is a Javascript function, again generated by Photoshop/GoLive.

So, to re-cap.

1. Does the <%=Page.ResolveURL("~/Images/Image1.jpg")%> work for Javascript image URI's
2. Should the "~/Images/Image1.jpg" or "/Images/Image1.jpg" work for standard HTML, ASP.NET controls and Javascript.
3. Am I going to have to re-build all the Photoshop generated stuff my own CSS (And will this still work)

The whole problem seems to stem from the fact that I am using a Master Page and have some pages at the root and some "Protected" pages in sub-folders and as such, cannot use a relative URI in the Master Page.

Looking forward to your thoughts again

regards

Mike

m1keread
Bored of Captions

odujosh wrote:
Many ways to skin this cat (in order of ease):
1)Move to an ASP.NET Image control. Then the '~' will work. Or add the runat attribute to the image tag. The URL will be resolved before it is sent down, so it will look like an absolute path client side.

The Javascript in my Master Page is primarily to do with swapping images when the mouseover event occurs. Problem is that Image location cannot be determined if in a page in a sub-folder from root and also in a page at root when using Master Pages.

I could not see anywhere in the ASP.NET Image control that I could emulate the MouseOver behaviour. Am I missing something ?

regards

Mike

odujosh
Need Microsoft SUX now!

You can add the onmouseover event to an image control. VS will complain but ignore it. When the codes gets to the client it will be an html image tag and be valid.

You could also do a user control. And write your menu to a blank user control by registering javascript that does document.write(). Register and then call the function in a <script> tag in the user control's body. If the warning breaks any standards you may have at your work.

Or you could use an ASP.NET Menu Control, which has a full eventing stack clientside. If it is just a text menu with roll over effects you are just waisting you time anyways since the ASP.NET Menu control is designed just for that.

Bob_Chauvin

I have a similare need. I have a root site with child sites. Each child site is based on a master. Each child site needs a unique logo, but when the image tag is resolved, it is always based on the location of the master page, at the root, so images always come from the root instead of the sub-site images folder.

How can I use a master page for sub-sites, and pull images from the sub-site Images folder? Expressionless

RootSite
    Images
    SubSite
       Images

    SubSite
       Images

Bob_Chauvin

I found that If I modify the style sheet to include a link to a css, and have the css reside in the sub directory, then the image will pull from the sub-dir.

Anyone have a better solution.

One downside, I have to copy the .css to each sub dir. The sub-dir has it's own images folder where the custom image resides.