target an image to div

S

soonic

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.
 
J

Jukka K. Korpela

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>
 
S

soonic

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>
 
S

soonic

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.
 
S

soonic

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>
 
J

Jukka K. Korpela

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.
 
S

soonic

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)
 
D

Denis McMahon

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top