target an image to div

04-20-2011

Hi

I have simple code to ilustrate my problem.

<a href="pic.jpg" target="image" >test</a>

......

<div>
<img src="" name="image" width="50px">

</div>

How to open an image in a div block? When I want use it as it is it
opens a new tab. (I don't want to use iframe)

s.

04-20-2011

soonic wrote:

> I have simple code to ilustrate my problem.
>
> <a href="pic.jpg" target="image" >test</a>

It doesn't really illustrate much; a URL tells more than a thousand words.

> <div>
> <img src="" name="image" width="50px">
>
> </div>

That's invalid markup, and otherwise incorrect too.

> How to open an image in a div block? When I want use it as it is it
> opens a new tab. (I don't want to use iframe)

If you don't want to use iframe, you have painted yourself in a JavaScript
corner. Scripting would be the only way, and it would naturally fail when
client-side scripting is disabled in the browser. You could use

<a href="pic.jpg" target="image" onclick="return show(this)">test</a>

with

<div id="show"></div>

and, assuming for definiteness that images are 50 by 50 pixels, with

<style>
#show { width: 50px; height: 50px; }
</style>

<script>
function show(link) {
document.getElementById("show").innerHTML =
'<img src=' + link.href + ' alt="">';
return false; }
</script>

--
Yucca, http://www.cs.tut.fi/~jkorpela/

04-20-2011

>
> If you don't want to use iframe, you have painted yourself in a
> JavaScript corner. Scripting would be the only way, and it would
> naturally fail when client-side scripting is disabled in the browser.

Well, I don't want use iframe because I can't disable zooming in/out
when a picture loads into iframe.

Thank you for your example w JS, but something is wrong with style'ing
the picture show as it is (real size, it doesn't work defined width and
height)

<html>
<head>
<style>
#show { width: 50px; height: 50px; border:1px solid red}
</style>

<script>
function show(link) {
document.getElementById("show").innerHTML ='<img src=' + link.href
+ ' alt="">';
return false; }
</script>

</head>
<body>
<a href="pic.jpg" onclick="return show(this)">test</a>
.....

<div id="show" ></div>
</body>
</html>

04-21-2011

>
> Thank you for your example w JS, but something is wrong with style'ing
> the picture show as it is (real size, it doesn't work defined width and
> height)

> document.getElementById("show").innerHTML ='<img src=' + link.href + '

ok, it works when I control the 'img ' with css.

04-21-2011

There is another problem I'm dealing with.
I have about 5 radiobuttons for each there are about 50 images to show
(it's not a gallery). I want to put then 50 of <a href...> (like you've
shown me below) and then I would need to pass somehow a parameter from a
checked radiobutton to the link. Let's say something like this

<INPUT TYPE="radio" name="same" value="1".....>
<INPUT TYPE="radio" name="same" value="2".....>

<a href="pic01_#value.jpg" onclick="return show(this)">test</a>

I'll appreciate if you help me with this. I would like to avoid the
non-economic method like 5x50->250 of <a href....>

<head>
<style>
#show { width: 100px; height: 100px; border:1px solid red }
img {width: 100px; height: 100px;}
</style>
<script>
function show(link) {
document.getElementById("show").innerHTML ='<img src=' + link.href
+ ' alt="">';
return false; }
</script>

</head>
<body>
<INPUT TYPE="radio" .....>

<a href="pic01.jpg" onclick="return show(this)">test</a>

<div id="show" ></div>

</body>

04-21-2011

soonic wrote:

> I have about 5 radiobuttons for each there are about 50 images to
> show (it's not a gallery).

So what is it? How do the radiobuttons relate to anything? It sounds like
they would be headings for images, which sounds really weird.

> I want to put then 50 of <a href...> (like
> you've shown me below) and then I would need to pass somehow a
> parameter from a checked radiobutton to the link.

You can of course generate elements in JavaScript using a loop. Or,
especially if you do not consider providing any non-JavaScript fallback, the
loop could just loop through a set of img elements and assign an onclick
event handler to each of them, without creating any new elements.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

04-21-2011

>
> So what is it? How do the radiobuttons relate to anything? It sounds
> like they would be headings for images, which sounds really weird.

Yes, they are headings for images, and this is the way it must be. The
rediobuttons are represent a topic and each topic requires different set
of images. For example:
Radiobutton 1 - topic 1
<a href....>1950</a>
<a href....>1951</a>
.....
2010

Radiobutton 2 - topic 2
<a href....>1950</a>
<a href....>1951</a>
.....
2010

The picture is dependent from these two conditions:
- chosen topic (radiobutton)
- a year which was clicked

But the common thing for all topic is <a href> and this can be written
once.

I hope its more clear now

>
> You can of course generate elements in JavaScript using a loop. Or,
> especially if you do not consider providing any non-JavaScript fallback,
> the loop could just loop through a set of img elements and assign an
> onclick event handler to each of them, without creating any new elements.

Please for an example, I don't know JS (I'm the beginner)

04-21-2011

On Wed, 20 Apr 2011 23:20:25 +0200, soonic wrote:

> Hi
>
> I have simple code to ilustrate my problem.
>
> <a href="pic.jpg" target="image" >test</a>
>
> .....
>
>
> <div>
> <img src="" name="image" width="50px">
>
> </div>
>
>
> How to open an image in a div block? When I want use it as it is it
> opens a new tab. (I don't want to use iframe)
>
>
> s.

You might find a thread started by "Haris Bogdanovic" in
comp.lang.javascript useful as well. You seem to be doing similar things
and having similar lacks of understanding.

Rgds

Denis McMahon

04-22-2011

>
> Please for an example, I don't know JS (I'm the beginner)
>

I've solved my problem with the help of
http://www.geekpedia.com/tutorial194...avaScript.html

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
<div ... /> and <div ...></div>	K Viltersten	ASP .Net	4	03-31-2009 07:33 PM
Problem in setting Target Node and Target Tree Property	mohit	ASP .Net	0	01-23-2008 05:41 AM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider	mscir	Javascript	3	06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B	Dwayne Madsen	Javascript	1	06-01-2005 03:02 PM
[XML Schema] Including a schema document with absent target namespace to a schema with specified target namespace	Stanimir Stamenkov	XML	3	04-25-2005 09:59 AM