Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

click on image to opne new browser window.

Posted on 2006-05-01
20
Medium Priority
?
440 Views
Last Modified: 2008-02-01
Hello,
I have an html page that displays inline different map images depending on the header link that is clicked by the user.
that part works fine, but i need to add a new functionality to the page. when the user click on  the link and the image
is display i would like to make the image clickable, so when the user clicks on it, it will open a new browser window
taking the user to a web page with a bigger image of the map.
I don't know if this is possible. but any help would be very much appreciate it.

Thank you in advance.

below is a portion of the code of my page.

Regards.

<html>
<head>
<title>Radar</title>
<csactions>
<csaction name="15a688a0" class="Set Image URL" type="onevent" val0="mainmap" val1="http://www.mymap1.com/maps/rad.jpg"    urlparams="2"></csaction>
<csaction name="15b67ab1" class="Set Image URL" type="onevent" val0="mainmap" val1="http://www.mymap2.com/maps/vis.jpg"     urlparams="2"></csaction>
<csaction name="15bdcbc2" class="Set Image URL" type="onevent" val0="mainmap" val1="http://www.mymap3.com/maps/visrad.jpg" urlparams="2"></csaction>
<csaction name="15c86b73" class="Set Image URL" type="onevent" val0="mainmap" val1="http://www.mymap4.com/maps/inf.jpg" urlparams="2"></csaction>
</csactions>

<csscriptdict import="import">
<script type="text/javascript" src="GlobalScripts/CSScriptLib.js"></script>
</csscriptdict>

<csactiondict>
<script type="text/javascript"><!--
CSAct[/*CMP*/ '15a688a0'] = new Array(CSSetImageURL,/*CMP*/ 'mainmap',/*URL*/ 'http://www.mymap1.com/maps/rad.jpg');
CSAct[/*CMP*/ '15b67ab1'] = new Array(CSSetImageURL,/*CMP*/ 'mainmap',/*URL*/ 'http://www.mymap2.com/maps/vis.jpg');
CSAct[/*CMP*/ '15bdcbc2'] = new Array(CSSetImageURL,/*CMP*/ 'mainmap',/*URL*/ 'http://www.mymap3.com/maps/visrad.jpg');
CSAct[/*CMP*/ '15c86b73'] = new Array(CSSetImageURL,/*CMP*/ 'mainmap',/*URL*/ 'http://www.mymap4.com/maps/inf.jpg');
// --></script>
</csactiondict>

</head>
<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" >
<div class="header">Maps</div>

<table width="100%" border="0" cellspacing="1" cellpadding="2">
<tr>
<td></td>
<td class="radars" onclick="CSAction(new Array(/*CMP*/'15a688a0'));return CSClickReturn()" csclick="15a688a0"><a class="radars" href="#">NEXRAD Radar</a></td>
<td class="radars" onclick="CSAction(new Array(/*CMP*/'15b67ab1'));return CSClickReturn()" csclick="15b67ab1"><a class="radars" href="#">Visible Satellite</a></td>
<td class="radars" onclick="CSAction(new Array(/*CMP*/'15bdcbc2'));return CSClickReturn()" csclick="15bdcbc2"><a class="radars" href="#">Visible and Radar</a></td>
<td class="radars" onclick="CSAction(new Array(/*CMP*/'15c86b73'));return CSClickReturn()" csclick="15c86b73"><a class="radars" href="#">Satellite</a></td>
</tr>
<tr>
<td align="center" width="1"><img src="images/spacer.gif" alt="" height="240" width="1" border="0"></td>
<td colspan="4" align="center"><img id="mainmap" src="http://www.mymap1.net/maps/rad.jpg" alt="" name="mainmap" border="0" /></td>
</tr>
</table>
</body>
</html>
0
Comment
Question by:itortu
  • 12
  • 8
20 Comments
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16577423
Look at the onclick="window.open (this.src, 'bw','toolbar=no');"


<img id="mainmap" onclick="window.open (this.src, 'bw','toolbar=no');" src="http://www.mymap1.net/maps/rad.jpg" alt="" name="mainmap" border="0" />

0
 

Author Comment

by:itortu
ID: 16577626
i apologize for my lack of understanding on this subject.

each one of the images have a link

map1 = http://www.maps.com/Global/category.asp?c=5265
map2 = http://www.maps.com/global/link.asp?l=119843
map3 = http://www.maps.com/global/link.asp?l=119848
map4 = http://www.maps.com/global/link.asp?l=119847

the html page that i have currently displays a map image, the image changes depending on the link that is click.
how can i incorporate click on image to open a new browser window using your suggestion?

thank you.
0
 

Author Comment

by:itortu
ID: 16577714
i just hope i am making sense.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:itortu
ID: 16578164
i changed the javascript, now the page looks like this:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Radar</title>
   <script>
  function changeImage(filename)
  {
      document.mainimage.src = filename;
  }
</script>
 </head>

 <body>
  <div class="header">RADARS AND SATELLITES</div>
  <table width="100%" border="0" cellspacing="1" cellpadding="2">

   <tr>
    <td></td>
    <td class="radars"><a href="javascript:changeImage('http://files.map1.com/max_s.jpg')" class="radars">Live Doppler</a></td>
    <td class="radars"><a href="javascript:changeImage('http://files.map2.com//weather_desktop_images/metro_nexrad_tracks.jpg')" class="radars">NEXRAD</a></td>
    <td class="radars"><a href="javascript:changeImage('http://files.map3.com//weather_desktop_images/sandmtn_nexrad_tracks.jpg')" class="radars">Sand NEXRAD </a></td>
    <td class="radars"><a href="javascript:changeImage('http://files.map4.com//weather_desktop_images/shoals_nexrad_tracks.jpg')" class="radars">Shoals NEXRAD</a></td>
   </tr>
   <tr>
    <td align="center" width="1"><img src="images/spacer.gif" alt="" height="240" width="1" border="0"></td>
    <td colspan="4" align="center"><img id="mainmap" src="http://files.map1.com/max_s.jpg" alt="" name="mainimage" border="0" /></td>
   </tr>
  </table>
 </body>
</html>

but i have not figure out how to make the image clickable. so when a suer clicks on it the user is directed to a web site where a bigger image and some description can be viewed.

any help is much appreciated.

thank you.
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16578199
Associated with each image , do you know which image needs to shown in new browser window ?

<script language="javascript">
function NewWindow(srcImg) {
window.open (srcImg, 'bw', 'toolbar=no');
}
</script>

<img src="tn_image1.jpg" onclick='NewWindow('image1.jpg'>
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16578213
Correction to last post..


<img src="tn_image1.jpg" onclick="NewWindow('image1.jpg');">
0
 

Author Comment

by:itortu
ID: 16578233
yes i kno wich image, actually when clicking on the image the user is directed to the web site where a bigger, more descriptive map is located.
i have been provided with links corresponding to each one of the .jpg images

thank you.
0
 

Author Comment

by:itortu
ID: 16578270
i don'r understand how can i incorporate this solution to my problem.
i already have a javascript function that handles all the images, so they are display inline.
i don't have an img tag for each one of them i just have img tag fo the place holder.
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16578275
In your code of changeImage () add a new code to handle onclick event,



  function newWindow(filename) {
        window.open (filename, 'bw', 'toolbar=no');
  }
 function changeImage(filename)
  {
     document.mainimage.src = filename;
    document.mainimage.onclick = function () { newWindow(filename);}
  }
0
 

Author Comment

by:itortu
ID: 16578298
thank you for being so patience with me. i really don't have much experience, and i am not a pro.
i appreciate your help a lot.
0
 

Author Comment

by:itortu
ID: 16578301
how would the html need to be change?
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16578345
No need to change any html changes.

Copy and paste my javascript code,


<script language="javascript">
 function newWindow(filename) {
       window.open (filename, 'bw', 'toolbar=no');
  }
 function changeImage(filename)
  {
     document.mainimage.src = filename;
    document.mainimage.onclick = function () { newWindow(filename);}
  }
</script>
 
0
 

Author Comment

by:itortu
ID: 16578434
this is what i did, based on your code:

what is happening right now, is that when i click on the map image a new window opens containing the same image but on a separate window.
the image is not linking to the website address when i click on it.

what did i do wrong while following your instructions?


<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <title>Radar</title>
  <link class="header" href="liveonline.css" rel="stylesheet" type="text/css" media="all" />

  <script language="javascript">
   function newWindow(filename) {
         window.open (filename, 'bw', 'toolbar=no');
    }
   function changeImage(filename)
    {
       document.mainimage.src = filename;
      document.mainimage.onclick = function () { newWindow(filename);}
    }
  </script>

 </head>

 <body>
  <div class="header">RADARS AND SATELLITES</div>
  <table width="100%" border="0" cellspacing="1" cellpadding="2">

   <tr>
    <td></td>

    <td class="radars"><a href="javascript:changeImage('http://files.map1.com/max_s.jpg', 'http://www.mapsite.com/Global/category.asp?c=5265');" class="radars">Live Doppler 48</a></td>
   </tr>
   <tr>
    <td align="center" width="1"><img src="images/spacer.gif" alt="" height="240" width="1" border="0"></td>
    <td colspan="4" align="center"><img id="mainmap" src="http://files.map1.com/max_s.jpg");" name="mainimage" border="0" /></td>
   </tr>
  </table>
 </body>

</html>
0
 

Author Comment

by:itortu
ID: 16578652
i hope you are still around. i can't get this to work. i see that only "filename" is being passed as a parameter on the new function you added.
and that is why on the new browser window the .jpg is displayed, but the http://www.mapsite.com/Global/category.asp?c=5265 is not being read.

if you have any ideas on how to solve this, please let me know.

thank you.
0
 

Author Comment

by:itortu
ID: 16579086
i was testing this page using firefox, and now i tested it with IE and it is giving me javascrip errors.

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <title>Radar</title>
  <link class="header" href="liveonline.css" rel="stylesheet" type="text/css" media="all" />

  <script language="javascript">
   function newWindow(filename) {
         window.open (filename, 'bw', 'toolbar=yes');
    }
   function changeImage(filename)
    {
       document.mainimage.src = filename;
       document.mainimage.onclick = function () { newWindow(filename);}
    }
  </script>

 </head>

 <body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" >
  <div class="header">RADARS AND SATELLITES</div>
  <table width="100%" border="0" cellspacing="1" cellpadding="2">

   <tr>
    <td></td>
    <td class="radars"><a href="javascript:changeImage('http://files.waff.com/max_s.jpg', 'http://www.waff.com/Global/category.asp?c=5265');" class="radars">Live Doppler 48</a></td>
    <td class="radars"><a href="javascript:changeImage('http://files.waff.com/weather_desktop_images/metro_nexrad_tracks.jpg', 'http://www.waff.com/global/link.asp?l=119843');" class="radars">Metro NEXRAD</a></td>
    <td class="radars"><a href="javascript:changeImage('http://files.waff.com/weather_desktop_images/sandmtn_nexrad_tracks.jpg', 'http://www.waff.com/global/link.asp?l=119848');" class="radars">Sand Mtn. NEXRAD </a></td>
    <td class="radars"><a href="javascript:changeImage('http://files.waff.com/weather_desktop_images/shoals_nexrad_tracks.jpg', 'http://www.waff.com/global/link.asp?l=119847');" class="radars">Shoals NEXRAD</a></td>
   </tr>
   <tr>
    <td width="1"></td>
    <td class="radars"><a href="javascript:changeImage('http://files.waff.com//weather_desktop_images/tennessee_nexrad_tracks.jpg', 'http://www.waff.com/global/link.asp?l=119852');" class="radars">Tennessee NEXRAD</a></td>
    <td class="radars"><a href="javascript:changeImage('http://files.waff.com/weather_desktop_images/web_300m_satrad.jpg', 'http://www.waff.com/global/link.asp?l=170652');" class="radars">300M Satellite</a></td>
    <td class="radars"><a href="javascript:changeImage('http://files.waff.com/weather_desktop_images/web_big_satrad.jpg', 'http://www.waff.com/global/link.asp?l=170653');" class="radars">OHV Satellite</a></td>
    <td class="radars"><a href="javascript:changeImage('http://files.waff.com/weather_desktop_images/web_se_satrad.jpg', 'http://www.waff.com/global/link.asp?l=187624');" class="radars">Southeast Satellite</a></td>
   </tr>
   <tr>
    <td align="center" width="1"><img src="images/spacer.gif" alt="" height="240" width="1" border="0"></td>
    <td colspan="4" align="center"><img id="mainmap" src="http://files.waff.com/max_s.jpg" name="mainimage" border="0" /></td>
   </tr>
  </table>
 </body>

</html>
0
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 600 total points
ID: 16579251
Let me ask you ?

How the image for the new Window is obtained ?

Is it obtained dynamically (by submitting the URL ) ?

or

You already know ?

Look at the last post,  the parmeters passed to changeImage () and the  definition of the function


<script language="javacript">

function newWindow(filename) {
       window.open (filename, 'bw', 'toolbar=no');
  }
 function changeImage(filename, clickLink)
 {
     document.mainimage.src = filename;
      document.mainimage.onclick = function () { newWindow(clickLink);}
 }

</script>

<a href="javascript:changeImage('http://files.waff.com/max_s.jpg', 'http://www.waff.com/Global/category.asp?c=5265');" class="radars">Live Doppler 48</a>
<img id="mainmap" src="http://files.waff.com/max_s.jpg" name="mainimage" border="0" />
0
 

Author Comment

by:itortu
ID: 16579535
Hi Pravinasar,
answering to your quest, ionthe image is obtained dynamically
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16579606
Then the supplying the link  is a solution.

When a window is open with a url link, after processing the request , new window should get the large image.

0
 

Author Comment

by:itortu
ID: 16580159
awesome, now it works just fine.
i had some typing errors, but oher than tha your code was excellent!

thank you very much for helping.

itortu.
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16580234
You are welcome!

_PA
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question