Anchor partway down a large image

This site is best viewed in a modern browser with JavaScript enabled.

Barbaric

I’m working on my first website ever;

You may think my gigantic image at the top is unusual, but my design would be more practical if I was able to implement this;

I am trying to figure out a way to have my internal links load the pages starting partway down the large image at the top. I’m trying to get my site to behave as if there was an anchor a little more than halfway down the shield image, a few pixels above the word Barbaric. Right now I have anchors on the very first text on every page, but I don’t want to skip over the big image entirely. And I also don’t want to always make the user scroll down all the way from the top to get to the text. I want to raise the anchors about 540 pixels upward, or do something else to that effect. Is this possible? I tried inserting a named anchor into a hotspot in Dreamweaver, and the site pretty much imploded. Yes, I’m quite new to web development.

Thanks in advance.

holyhttp

You can use a named anchor on each web page <a name="textstart"></a> right below the image:
<img id="Image1" src="http://barbaricsoftworks.com/bigPicture.jpg" alt="" usemap="#Map">
<a name="textstart"></a>
You can then add the #textstart to the url of your internal links:
<a href="http://warlordandchieftain.tumblr.com/#textstart" target="_top" class="bc_feedwebsitelink" style="text-decoration: none;"><h4 id="feedtitle" style="margin-top: 0px; display: none"><span class="bc_feedtitle">Barbaric Softworks</span></h4></a>

Unfortunately you have no way of raising the named anchors halfway down the shield image using just HTML as shown above. You can use

<body onload="window.scrollTo(0, 540)" > or just add window.scrollTo(0, 540); as the first statement in your init() function.
To make your script usable for the entire site, move your javaScript (below) to an external file so you won't have to paste the same code over and over to each page.

//====================================
var preloads=[];
var domain='http://barbaricsoftworks.com/';

Barbaric

Thanks, holyhttp; window.scrollTo() was exactly what I was looking for.

jedaisoul

This is not a reply to your query, I just thought you might be interested to see how the load time of the site could be improved by optimising the very impressive (but rather large) graphics. I've had to optimise more aggressively than I normally would to get the 500 KByte+ originals down to under 100 KBytes (the attachment limit here) but I think they are surprisingly good, considering they are a fifth the file size!

The attachments of this post were removed during the platform migration in 2018

jedaisoul

And the last one..

The attachments of this post were removed during the platform migration in 2018

ZABI

thats gr8 how do you optimize those images ? which tool you are using. i ve used PHP GD library to optimize some images on the fly.

jedaisoul

I used a rather ancient copy of Fireworks MX. First I chose the image with the largest file size and did test compressions from 80 % to 10% at 10% intervals. I immediately eliminated those from 40% downwards on quality grounds. Also 60% upwards were too large to upload, with edge sharpening, and were inferior to 50% (sharpened) without it. So I concentrated on getting the best out of the 50% to 60% range. It turned out best at 55% with edge-sharpening non-progressive. Having established that I simply applied the same compression to the other five images. So, yes, having a suitable tool is essential, but it also requires a methodical approach and attention to detail. The trick is to do A:B comparisons at 200% magnitude, with frequent reference back to the uncompressed original. The A:B comparisons were done with Microsoft Office Picture Manager, as it allows you to switch between images without losing the magnitude setting.

Barbaric

Are you getting load time issues? I never really tried my site out on different connections. The load time on my connection was always good, even with the high quality images.

jedaisoul

Connected by cable to the router, no. But using a wi-fi connection, you can watch the display scroll down. I haven't tried the 3G dongle, but I can if you wish. I have one for test purposes. I'm sure it would be chronic. You can't assume that everyone has a fast broadband connection, particularly with the growth in mobiles and tablets.

Barbaric

I use a wireless router and I’m okay with the loading time on my phone’s data plan, which seems to take about two seconds on Verizon. I’m about to announce the site on Facebook, and if people find that it’s an issue for them, I’ll scale down the quality of the images to somewhere between where they are now and what you’ve posted.

jedaisoul

To give you an example, I have an Intel Atom powered netbook running Win7 connected by a relatively fast 3G dongle. It took 52 seconds to load your home page. And that is comparable, if not superior to many tablets. I suspect that you will need to review the load time of the site. But anyway, all the best with the launch of your site.

Barbaric

The discrepancy between our experiences loading the site on 3G is puzzling. Whenever I’m somewhere remote that is likely to have poor 3G coverage, I will try to replicate your findings with my Android. The reason I’m not super concerned with this issue is that the site is for a Steam game developer. Our target audience largely uses gaming PCs, cares a lot about graphics (thus my aversion to compression artifacts), and would rather die than have an inadequate internet connection. Thanks for pointing the issue out though; if more people confirm it, I’ll compress the images more.