target an image to div

Discussion in 'HTML' started by soonic, Apr 20, 2011.

  1. soonic

    soonic Guest

    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.
     
    soonic, Apr 20, 2011
    #1
    1. Advertising

  2. 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/
     
    Jukka K. Korpela, Apr 20, 2011
    #2
    1. Advertising

  3. soonic

    soonic Guest


    >
    > 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 20, 2011
    #3
  4. soonic

    soonic Guest


    >
    > 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
    #4
  5. soonic

    soonic Guest

    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>
     
    soonic, Apr 21, 2011
    #5
  6. 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/
     
    Jukka K. Korpela, Apr 21, 2011
    #6
  7. soonic

    soonic Guest


    >
    > 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)
     
    soonic, Apr 21, 2011
    #7
  8. 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
     
    Denis McMahon, Apr 21, 2011
    #8
  9. soonic

    soonic Guest

    soonic, Apr 22, 2011
    #9
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. mohit
    Replies:
    0
    Views:
    569
    mohit
    Jan 23, 2008
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    757
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    197
    David Dorward
    Jun 1, 2005
  4. mscir
    Replies:
    3
    Views:
    321
    Martin Honnen
    Jun 26, 2005
  5. Replies:
    4
    Views:
    174
Loading...

Share This Page