www.webdeveloper.com
Results 1 to 12 of 12

Thread: Anchor partway down a large image

  1. #1
    Join Date
    Sep 2012
    Posts
    13

    Anchor partway down a large image

    I知 working on my first website ever;

    http://barbaricsoftworks.com/

    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知 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稚 want to skip over the big image entirely. And I also don稚 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知 quite new to web development.

    Thanks in advance.

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    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/';

    function preload(){
    for(var i=0;i<arguments.length;i++) {
    preloads[preloads.length]=new Image();
    preloads[preloads.length-1].src=domain+arguments[i];
    }
    }

    preload('jay.jpg','sam.jpg','games.jpg','contact.jpg','home.jpg');

    function init(){
    window.scrollTo(0, 540);
    ars=document.getElementById('Map').getElementsByTagName('area');
    for(c=0;c<ars.length;c++) {
    ars[c].number=c;
    ars[c].onmouseover=function() {
    document.getElementById('Image1').src=preloads[this.number].src;
    this.onmouseout=function() {
    document.getElementById('Image1').src=domain+'bigPicture.jpg';
    }
    }
    }
    }

    window.addEventListener? window.addEventListener('load',init,false):window.attachEvent('onload',init);
    //====================================

  3. #3
    Join Date
    Sep 2012
    Posts
    13
    Thanks, holyhttp; window.scrollTo() was exactly what I was looking for.

  4. #4
    Join Date
    Mar 2012
    Posts
    1,720
    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!
    Attached Images Attached Images

  5. #5
    Join Date
    Mar 2012
    Posts
    1,720
    And the last one..
    Attached Images Attached Images

  6. #6
    Join Date
    Mar 2009
    Posts
    452
    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.

  7. #7
    Join Date
    Mar 2012
    Posts
    1,720
    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.
    Last edited by jedaisoul; 09-15-2012 at 06:14 AM.

  8. #8
    Join Date
    Sep 2012
    Posts
    13
    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.

  9. #9
    Join Date
    Mar 2012
    Posts
    1,720
    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.

  10. #10
    Join Date
    Sep 2012
    Posts
    13
    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.

  11. #11
    Join Date
    Mar 2012
    Posts
    1,720
    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.
    Last edited by jedaisoul; 09-16-2012 at 04:34 AM.

  12. #12
    Join Date
    Sep 2012
    Posts
    13
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles