Images in a new window

  gibbs1984 15:41 12 Aug 2006
Locked

Hi,

I have jsut created a new website using XHTML and CSS and I have an image gallery but want to add more pics to it, now obviously the more I add the slower it will download so how can I add a hyerlink that opens the pic in another window.

  ade.h 23:37 12 Aug 2006

In the HTML, set your target to "blank"

ie: <p><a href="click here" target="_blank">

  barryoneoff.co.uk 23:37 12 Aug 2006

is to add "target=_blank" to the html. Note that the underscore "_" is important, so don't leave it out.

If you want it in a pop up rather than a normal new window you need to use java script.

  barryoneoff.co.uk 23:38 12 Aug 2006

great minds think alike it seems!

  ade.h 23:55 12 Aug 2006

"Great minds..." Love it! Cheers Barry! :-)

  PurplePenny 21:24 13 Aug 2006

Remember that if you are going to use target="_blank" with XHTML you will have to declare it as transitional not strict as target isn't allowed in strict.

(Standardistas who insist on using a strict DTD will go to the trouble of using JavaScript to open a new window which seems to me to be defeating the object of the exercise!)

  gibbs1984 22:17 13 Aug 2006

Hi,

Thanks for your responses and I am using transitional but doesn't that mean that I need to create a new page for my image to open to, if you understand that.

What I want exactly is a one word link that then opens up a picture in another page so that the picture doesn't have to be loaded the first time they open my website.

  gibbs1984 19:06 15 Aug 2006

*bump*

Sorry for being impatient.

  gibbs1984 17:39 17 Aug 2006

Hi,

Thanks for your suggestions, I have been learning html, xhtml and css for about a month now and haven't used any tools to develop my website, I have coded it all myself and would really like some pointers as to how to code this bit in.

I will convert the pictures to thumbnails and use them as the link to opening in another window so if someone can provide me with the code or somewhere where I can find it, or just a clue at what attributes to use, I have looked on W3C but can't seem to find it on there.

Thanks in advance.

P.S. Any comments regarding my website would be welcome click here

  slightlymad 18:58 17 Aug 2006

Clean, uncluttered design, very nice.

Remove the "Mr", though. Mr is a title, and you don't give yourself a title - that's for others to do.

Take a look click here for the coding that you want.

You really, really need to re-size your images, Stephen!

Your 'boys' image, for example, is a whacking great 1280 x 660px, which is why the page is taking so long to load.

For the example I've given you, I resized the image to 800px by 600px, and that's for the large version that opens up!

The smaller (thumbnail) version is half of that, 400px by 300px (which you'll see from the coding).

It's no good just setting the size of the images in the coding, as you've seen! All that happens is that the browser squeezes (and distorts) the image into the space that you've allowed.

I've also added the ALT attribute, which is an ALTernative to the image, for those visitors who don't display images for whatever reason.

The TITLE attribute offers advisory information about the element for which it is set - a tooltip, if you like.

The ALT attribute should ALWAYS be specified, but the TITLE tag is optional.

Hope this helps.

Marie

  slightlymad 19:05 17 Aug 2006

But right-click on the page, and select "view source" for the coding.

I'll put it here, anyway:

<a href="gallery_files/theboys-big.jpg"><img src="gallery_files/theboys-small.jpg" alt="All my Watford FC mates out in the sunshine in Ibiza" title="All my Watford FC mates out in the sunshine in Ibiza" width="400" height="300" border="0" /></a>

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Alienware 17 R4 2017 review

These brilliant Lego posters show just what children's imaginations are capable of

Mac power user tips and hidden tricks

Comment réinitialiser votre PC, ordinateur portable ou tablette Windows ?