www.webdeveloper.com
Results 1 to 7 of 7

Thread: Onclick image open multiple tabs

  1. #1
    Join Date
    Oct 2012
    Posts
    36

    Onclick image open multiple tabs

    Hi yes was wondering if anyone would be as so kind to help me with something,

    I am creating something through notepad as practice, what I am doing is i have an image which i know the image code is

    <img src=".jpg"></img>

    I know that I can link this image so that when you click on it it will open in another tab/window by the following command

    <a href=".html" target="_blank"><img src=".jpg"></a></img>

    So i know when i click on the image it will open the link in a new tab/window, However what i do not know how to do and what I am trying to do is when you click on that same image it opens up either 2 or 3 different windows/tab and each window/tab is a differentlink,

    So if there is any help that anyone can provide i would be forever grateful,

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    The target="" attribute always is misused because browsers are still re-acting to it incorrectly when the improper document type is being used. Developers still make browsers backwards compatible which is why it still works. Sites do not control how links are opened on a web page and should not have that kind of control for Users. The links are set by the users' browsers' settings for Tabs. Or, they can right click any link and select to open in a new window or tab from the popup Context Menu.

    Avoid forcing to open in a new window: http://www.webnauts.net/new-window.html
    Force links to open in new window: http://www.knowlegezone.com/pages/document.aspx?item=9

    If you want a correct way, which is not always reliable depending on JS being enabled in the browser, use:

    Open new window:

    Code:
    onclick="window.open (this.href, ''); return false"
    Open Multiple Pages Link:

    Code:
    <a href="pageToLoadInThisWindow.html" onclick="javascript:window.open("pageToLoadInOtherWindow.html","other_window");return true;">Link Description</a>

  3. #3
    Join Date
    Oct 2012
    Posts
    36
    Thank you for that information, Now not sure if you can answer this, but lets say there are two images and you want each image to open a link, i've tried a few ways but every function always opens the same links even on different images.

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    Not sure I understand the problem of multiple images opening their own links. Is this what you are asking?...

    Image Link:

    Code:
    <p><a href="URL One" title="Mouseover Description"><img style="width: XXpx; height: YYpx; border: 0;" src="images/image_one.jpg" alt="Text Description"></a><a href="URL Two" title="Mouseover Description"><img style="width: XXpx; height: YYpx; border: 0;" src="images/image_two.jpg" alt="Text Description"></a></p>
    (You can change the "p" tags to div tags and style as needed.)

  5. #5
    Join Date
    Oct 2012
    Posts
    36
    I'll try to explain it better, I have a website made and i have a huge table, and with in each cell of the table i have a single picture, so lets say i have a table with two cells and in each cell there is two different images, i would like the image in cell number 1 to link to one or maybe two sites, and then the image in cell number 2 to be linked to 1 or 3 different other sites.

  6. #6
    Try the following code for your need

    <img src=".jpg" onclick="doOpen()">

    <script type="text/javascript">
    function doOpen()
    {
    window.open("Filename1");
    window.open("FilePath2");
    window.open("FilePath3");

    }
    </script>

  7. #7
    Join Date
    Oct 2012
    Posts
    36
    Okay the result of that code is that I posted my image.jpg file and when clicking on it did open the three windows, 2 in tabs in the same browser and then 1 in a separate window all together which i don't understand but my question is though is lets say I made a table

    so that's my table and i had a jpg image two different individul images in each cell, lets say a smiley face and cat, lets say i click on the smiley face i want it to go to walmart.com and rent a center.com but when i click on the cat i want it to go to petsupermarket.com, petsmart.com and petco.com is there any way to do that with an onclick approach

    row1 cell 1,
    row2 cell 2.

    below is an example, is two different images in a table, notice how all the links are the same except for the second image one of the links are different however when i click on the first image it still brings up the same set of links. even when i want each image to open its on set of links, hope this is a better explenation of what i am asking.

    <html>

    <table>
    <tr>
    <td><img src="http://www.cartoonlogodesigns.com/images/misc/Smiley%20faces/smiley%20face.jpg" onclick="doOpen()"></td>

    <script type="text/javascript">
    function doOpen()
    {
    window.open("http://www.wwe.com");
    window.open("http://www.google.com");
    window.open("http://www.yahoo.com");

    }
    </script>
    </tr>
    <tr>
    <td><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" onclick="doOpen()"></td>

    <script type="text/javascript">
    function doOpen()
    {
    window.open("http://www.ups.com");
    window.open("http://www.google.com");
    window.open("http://www.msn.com");

    }
    </script>
    </tr>
    </table>
    </html>
    Last edited by spudly1987; 10-29-2012 at 11:47 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles