Comment Feed for Absolute Image Locations and Master Pages (TechOff on Channel 9)

Re: Absolute Image Locations and Master Pages

Bob_Chauvin — Tue, 23 Jan 2007 19:14:20 GMT

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.

Re: Absolute Image Locations and Master Pages

Bob_Chauvin — Tue, 23 Jan 2007 17:21:22 GMT

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?:|

RootSite
    Images
    SubSite
       Images

    SubSite
       Images

Re: Absolute Image Locations and Master Pages

odujosh — Thu, 30 Nov 2006 21:21:49 GMT

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.

Re: Absolute Image Locations and Master Pages

m1keread — Thu, 30 Nov 2006 16:57:21 GMT

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

Re: Absolute Image Locations and Master Pages

m1keread — Thu, 30 Nov 2006 16:54:51 GMT

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

Re: Absolute Image Locations and Master Pages

odujosh — Thu, 30 Nov 2006 13:39:07 GMT

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.

Re: Absolute Image Locations and Master Pages

m1keread — Thu, 30 Nov 2006 13:18:45 GMT

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

Re: Absolute Image Locations and Master Pages

Rotem Kirshenbaum — Thu, 30 Nov 2006 10:02:53 GMT

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

Rotem