target an image to div

soonic · Apr 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.

Jukka K. Korpela · Apr 20, 2011

soonic said:
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>

soonic · Apr 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>

soonic · Apr 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.

soonic · Apr 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>

Jukka K. Korpela · Apr 21, 2011

soonic said:
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.

soonic · Apr 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)

Denis McMahon · Apr 21, 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.

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

soonic · Apr 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_Using-radio-buttons-with-JavaScript.html

Clickable Div Block	1	Oct 13, 2023
<div> help	1	Mar 4, 2024
Hover state on an element stuttering when I'm close to the edge, or move my mouse really fast	1	Feb 2, 2023
Image shifts to the right when export the page to pdf	4	May 5, 2023
Animate a background image	0	May 4, 2022
How to make a div select work?	5	Jan 13, 2022
Trying to add text into an editable div that is in an iframe	0	Dec 15, 2022
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023

target an image to div

soonic

Jukka K. Korpela

soonic

soonic

soonic

Jukka K. Korpela

soonic

Denis McMahon

soonic

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads