Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Photo in middle with a href

Reply
Thread Tools

Photo in middle with a href

 
 
John Larronn
Guest
Posts: n/a
 
      01-23-2011
Hi there,

Is there anyone who could help me with a little problem?

How can I put a photo in the middle of a new page using the following -
usual - code?

<a href="studie_tree.jpg">

Using this code, the photo is aligned at the left of the new page. But I
want to put it in the middle of the new page. Any ideas?

Thanks

John

 
Reply With Quote
 
 
 
 
Adrienne Boswell
Guest
Posts: n/a
 
      01-23-2011
Gazing into my crystal ball I observed "John Larronn"
<(E-Mail Removed)> writing in
news:rC__o.6027$(E-Mail Removed)2:

> Hi there,
>
> Is there anyone who could help me with a little problem?
>
> How can I put a photo in the middle of a new page using the following
> - usual - code?
>
> <a href="studie_tree.jpg">
>
> Using this code, the photo is aligned at the left of the new page. But
> I want to put it in the middle of the new page. Any ideas?
>
> Thanks
>
> John
>
>


There are several ways to do this, here's one:

<style type="text/css">
p.center {
text-align:center;
}
</style>
</head>
<body>
<p class="center"><a href="example.com"><img src="myimage.png"
alt="alternative text" height="100" width="100"></a></p>

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
 
Reply With Quote
 
 
 
 
Denis McMahon
Guest
Posts: n/a
 
      01-23-2011
On 23/01/11 18:40, John Larronn wrote:
> Hi there,
>
> Is there anyone who could help me with a little problem?
>
> How can I put a photo in the middle of a new page using the following -
> usual - code?
>
> <a href="studie_tree.jpg">
>
> Using this code, the photo is aligned at the left of the new page. But I
> want to put it in the middle of the new page. Any ideas?


That's an anchor, not a photo.

Enclose the anchor in a paragraph, and apply a style to the paragraph:

<p style="text-align:center">
<a href="studie_tree.jpg">link text[or maybe <img
src="studie_tree_thumbnail.jpg">]</a>
</p>

Rgds

Denis McMahon
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      01-23-2011
In article <rC__o.6027$(E-Mail Removed)2>,
"John Larronn" <(E-Mail Removed)> wrote:

> How can I put a photo in the middle of a new page using the following -
> usual - code?
>
> <a href="studie_tree.jpg">
>
> Using this code, the photo is aligned at the left of the new page. But I
> want to put it in the middle of the new page. Any ideas?


If you use links to enlargements a lot, from say, thumbnail
images on a website page, it is a great time saver to simply have
a link directly to the image. But, alas, you thereby lose control
over where the image get placed, most browsers default to top
left.

You can spend time to fix your problem in various ways. You can
make yourself a template html page with simple code to get
horizontal centring (to keep it simple for the moment) using such
as:

<div><img style="margin:auto; display:block;" src="..."
alt=""></div>

or

<div style="text-align: center;"><img src="..." alt=""></div>

And simply fill in the dots with the name of the image file when
you want to use such a link. Useful for galleries of thumbnails.
But time consuming because you need to name each destination html
file uniquely.

If you don't want to go to the trouble of this, there is one
simple technique to get a bit of grace from pics being displayed
jammed up to the left - *if* you already prepare your own
pictures and know your plan. You can include a bit of top and
left spacing outside of the substantial image content. The
browser does not know it is being tricked. You won't get centring
this way easily, but it looks better in many browsers.

There would be other ways perhaps, using javascript or
server-side scripting and organising.

--
dorayme
 
Reply With Quote
 
John Larronn
Guest
Posts: n/a
 
      01-24-2011
Hi All,

Thank you very much indeed for helping me out.

I will study your answers.

I am building a website with about fifty photographs. They are thumbnails,
and when you click on them they appear in new pages - enlarged - aligned at
the left.

I will come back to you soon.

Kind regards,

John


 
Reply With Quote
 
Denis McMahon
Guest
Posts: n/a
 
      01-24-2011
On 24/01/11 02:07, John Larronn wrote:
> Hi All,
>
> Thank you very much indeed for helping me out.
>
> I will study your answers.
>
> I am building a website with about fifty photographs. They are
> thumbnails, and when you click on them they appear in new pages -
> enlarged - aligned at the left.
>
> I will come back to you soon.


Ah

So it's not the "<a href="image file name"><img src="thumbnail"></a>"
that you want to be centered, but the resulting image when it opens in a
new window.

You can only do that by wrapping the image in html file and applying
styles to it there.

However, to save creating html files for each image, you could open them
in a new window (or tab, depending on the viewers browser settings)
using javascript to create the html that both loads the image and
applies the styles.

There's an example of this at:

http://www.sined.co.uk/tmp/picloader.htm

Rgds

Denis McMahon
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      01-24-2011
Denis McMahon wrote:
> However, to save creating html files for each image, you could open them
> in a new window (or tab, depending on the viewers browser settings)
> using javascript to create the html that both loads the image and
> applies the styles.


Or better yet use a server side script to generate the page for each
image that would *always* work regardless of the user's browser
settings. Many scripts out there, but if you wish to roll your own it is
very simple in the language of your choice, and outline in pseudocode:

Get image name passed in query string

Filter value to insure safe
(
limit length to reasonable size
remove "bad" characters not allowed in filename
)

Validate value
(
compare to preset list
or
compare to listing that your script creates by reading the image
folder
)

If value valid image then
create page with image
Else
display error message






--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
John Larronn
Guest
Posts: n/a
 
      01-25-2011
Hi All and Jonathan,

Thanks very much for your help!

I am now busy applying your advice to my site.

You have all been a great help.

Kind regards,

John


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Editing photo -removing an object from middle of photo gdtobin@exemail.com.au Computer Support 6 12-05-2007 06:10 PM
href="javascript:func()" vs href="#" onclick="javascript:func()" CRON HTML 24 06-20-2006 08:05 PM
onClick method question (this.href and document.location.href) yogesh.bhardwaj@gmail.com Javascript 2 02-03-2005 02:38 PM
difference between location.href and window.location.href? saiho.yuen Javascript 3 09-14-2004 06:51 PM
Problem: Setting MSIE iframe innerHTML change relative href/src to absolute href/src Soren Vejrum Javascript 4 07-05-2003 01:47 PM



Advertisments