www.webdeveloper.com
Results 1 to 7 of 7

Thread: Using a certain area of the page/set of pixels as a link???

  1. #1
    Join Date
    Apr 2006
    Posts
    19

    Using a certain area of the page/set of pixels as a link???

    Right, I was hoping to set up an image as a link, but the image won't fit in with the background - I can't seem to create a transparent image in PaintShop, any image I create is saved with a white background, which doesn't fit in with the background I'm already using on the webpage.
    So I was wondering if I incorporated the image itself into the page's background (which is possible in PaintShop), could I just set up a certain part of the page (basically, the part of the page that includes the image I'm looking to include) as a link, so that if the user clicks on that area or set of pixels, the link will be activated and the user will be directed to another page?

    So is there any way of configuring a certain part of the page, not a certain part of text or a certain image, but just a certain area of the page, as a link?

    Cheers,
    Jim

  2. #2
    Join Date
    Apr 2006
    Posts
    18
    Quote Originally Posted by myownslave
    Right, I was hoping to set up an image as a link, but the image won't fit in with the background - I can't seem to create a transparent image in PaintShop, any image I create is saved with a white background, which doesn't fit in with the background I'm already using on the webpage.
    So I was wondering if I incorporated the image itself into the page's background (which is possible in PaintShop), could I just set up a certain part of the page (basically, the part of the page that includes the image I'm looking to include) as a link, so that if the user clicks on that area or set of pixels, the link will be activated and the user will be directed to another page?

    So is there any way of configuring a certain part of the page, not a certain part of text or a certain image, but just a certain area of the page, as a link?

    Cheers,
    Jim
    It is possible to use an image for this purpose. You simply need to create an image that is transparent. To preserve the transparency of the image you should save it in GIF format, this way, the image will match your background without ruining it. To turn the image into an active area to click on you must "activate" the image by wrapping anchor tags around the image tags, like so:

    Code:
    <a href="#"><img src="someimage.gif"></a>
    To make sure the image isn't ruined by the blue border that appears around the image when it is activated, you should add the border="0" attribute to the image tag, see example below:

    Code:
    <a href="#"><img src="someimage.gif" border="0"></a>
    Now, if you wish not to use this method, I will show you another way.

    This second method uses a div layer with fixed width and height attributes and anchor tags to "activate" the layer so it is clickable.

    Examine the following code:

    Code:
    <style type="text/css">
    #activeArea { height: 200px; width: 200px; }
    </style
    The above code is the CSS (Cascading Style Sheet) code which defines the style of the layer.

    In between the <head></head> tags I have placed internal CSS code. The <style type="text/css"></style> tells the internet browser that all code that follows should be rendered as CSS. I have decided to call the layer "activeArea".

    Let's review what each part of the layer does:

    height: this attribute is to specify a fixed height for the layer. This can be adjusted to match your specifications.
    width: this attribute specifies a fixed width for the later. This can again be adjusted to match your specifications.

    Now that the layer is set up, you need to use the necessary HTML so that the layer shows up on your web page:

    Code:
    <a href="http://www.somesite.com"><div id="activeArea"></div></a>
    First of all, we use the anchor tags to "activate" the layer. Then, we insert the div tag inside of the anchor tags (to activate the layer) and give it an id of activeArea so that it takes upon the styling of the CSS code we did earlier.

    Let's look at the full code:

    Code:
    <html>
    <head>
    <title></title>
    <style type="text/css">
    #activeArea { height: 200px; width: 200px; }
    </style>
    </head>
    <body>
    <a href="http://www.somesite.com" target="_blank"><div id="activeArea"></div></a>
    </body>
    </html>
    This should achieve the effect you are aiming for. You can add target="_blank" to the anchor tag to make the web page open in a new window, like this:

    Code:
    <a href="http://www.somesite.com" target="_blank"><div id="activeArea"></div></a>
    You can see a working example of this at the following address: https://www.sharemation.com/Chalk4Br...tm?uniq=yr2vjb

    Note: Where the text appears on this web page, the div layer and image are below.

    I hope this helps you.

    Regards,
    Becky

  3. #3
    Join Date
    Apr 2006
    Posts
    18
    I should also add that, if you find the dotted border around the active image annoying when clicking on it, add onFocus="if(this.blur)this.blur()" to the anchor tag, like so:

    Code:
    <a href="http://www.webdeveloper.com/forum/" target="_blank" onFocus="if(this.blur)this.blur()"><img src="bg.gif" border="0"></a>
    Regards,
    Becky

  4. #4
    Join Date
    Apr 2006
    Posts
    19
    Cheers for that Becky.
    I tried saving the image as a .gif but it made no difference - the white background still persisted. I recreated the image both in PaintShop and in Paint, and saved as .gifs but still the same result. Any ideas why this is the case? I can't see how the file format alone would result in the image baing transparent - are there other settings I need to activate in Paint/PaintShop Pro also?

    Doesn't really matter anyway seeing as the CSS example you provided should sort me out. I'll give that a try. Thanks again.

    Jim

  5. #5
    Join Date
    Apr 2006
    Posts
    19
    Actually, just one question on the whole CSS example - what I would be hoping to do with that is to have the image I want incorporated into the background image, and then just have an empty style sheet over that image, so that when the user wants to click on the link, they are not clicking on the image (cos it's just part of the background image) but instead are clicking on an empty style sheet that is placed over that part of the background image.

    This is all fine in theory, but I'm wondering would I run into problems with different browsers as regards the sizing and location of the sytle sheet in relation to the part of the background image. Would it be that depending on the browser release or settings, in some cases, the stylesheet might not hover over that exact part of the background image? Or is there nothing to worry about?!

    Maybe the transparent image is the best way to go after all?!

  6. #6
    Join Date
    Apr 2006
    Posts
    19
    Anyone have any update on this???

  7. #7
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    73
    It shouldn't be too difficult to find a way to make your image transparent rather than using this way too involved method to make the image part of the background. I don't have PaintShop, but my new computer came with Microsoft Photo Editor, which has a transparent tool.

    If you open your image in MS Photo Editor, then click on Tools, check Set Transparent Color. Then you will have a tool icon which you can click on the white background to make it transparent. You will know it is working by the fact that you will then have a checkered gray and white background. Save your image as a gif, and you are all set.

    If you don't have MS Photo Editor, search your Help in PaintShop, there is sure to be a way to make the image transparent. Although Microsoft Paint does not.

Thread Information

Users Browsing this Thread

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

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