Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    6
    Thanked 0 Times in 0 Posts

    I'll try again - Onload / Onmouseover issues

    Think my last question had too much code so I'll try again

    I am trying to write an onmouseover page where an image is displayed and onmouseover text is dynamically changed. When I mouseover a certain part of the image the text changes but I don't know how to make it linkable (without an <a href> I can't make it linkable). Because I use <div>'s to change the text dynamically, can I put an <a href> inside the <div>?

    Can someone please look at the <div> </div> portion of the listed code below and tell me how I can get the newly displayed data to be linkable, ty

    code (I have removed most code that is not relevant to the question):
    Code:
     
    <html>
    <head>
    <STYLE TYPE="text/css">
    div#DBtext_link {
    font-family: Georgia;
    font-size: .75em;
    color: blue;
    text-align: left;
    width: 100px;}
    </STYLE>
    
    <?
    // open database and get list of map entries and associated links in otmm_bc
    
    $db = mysql_connect("XXXXXXXXX","XXXXXXXXXX","XXXXXXXX");
    mysql_select_db("XXXXXXXX" ,$db);
    $result = mysql_query("SELECT * FROM otmm_bc", $db);
    $num_rows = mysql_num_rows($result);
    $sql = mysql_query("SELECT *
    FROM `otmm_bc`
    LIMIT 0 , $num_rows" ,$db);
    
    $map_entry_counter = 0;
    while ($tablerows = mysql_fetch_row($sql))
    {
    $web_adr_array[$map_entry_counter] = $tablerows[5];
    $pic_adr_array[$map_entry_counter] = $tablerows[7];
    $map_entry_counter = $map_entry_counter + 1;
    } 
    mysql_close($db);
    
    
    //assign array of links to string
    
    $row_limit = $num_rows - 1;
    for ($otmm_loop=0;$otmm_loop<$num_rows;$otmm_loop=$otmm_loop+1)
    {
    if ($otmm_loop == 0)
    {
    $otmm_image_string = "$pic_adr_array[$otmm_loop]".",";
    }
    elseif ($otmm_loop == $row_limit)
    {
    $otmm_image_string = "$otmm_image_string"."$pic_adr_array[$otmm_loop]";
    }
    else
    {
    $otmm_image_string = "$otmm_image_string"."$pic_adr_array[$otmm_loop]".",";
    }
    }
    
    $s1 = "$otmm_image_string";
    $qs1 = "\"".implode("\",\"",explode(",",$s1))."\"";
    
    
    // function for on mouse over to do BOTH //
    ?>
    <script type=text/javascript>
    function doChanges(y){
    var z= y;
    var imagevar = myimages[z];
    var imagethis = this.href;
    changeimage(imagevar,imagethis);
    changetext(z);
    }
    </script>
    <?
    // function for on mouse over text //
    ?>
    <script type=text/javascript>
    function changetext(z){
    var s= z;
    
    <?
    // functions for on mouse over images //
    ?>
    
    <script type=text/javascript>
    function changeimage(towhat,url){
    if (document.images){
    document.images.targetimage.src=towhat.src
    gotolink=url
    }
    }
    
    function warp(){
    window.location=gotolink
    }
    
    </script>
    
    <script type=text/javascript>
    var myArrayWebadr = ["<?php echo implode('","',$web_adr_array); ?>"];
    
    var myimages=new Array()
    var gotolink="#"
    
    function preloadimages(){
    for (i=0;i<preloadimages.arguments.length;i++){
    myimages[i]=new Image()
    myimages[i].src=preloadimages.arguments[i]
    }
    }
    
    preloadimages(<?echo("$qs1");?>);
    </script>
    </head> 
    <body>
    
    <table width="100%" align="center" cellspacing="1" cellpaddin="1" border="0">
    <tr>
    <td valign="top"><a class="smalltext_otmm">Web adr:<a/></td>
    </tr>
    <tr>
    <td valign="top"><div id="DBtext_link"><?echo("$web_adr_array[0]");?></div></td>
    </tr> 
    <tr>
    <td>
    <img src="http://www.the-rational-investor.com/images/OnTheMiningMap/<?echo("$map_version");?>"
    BORDER="2"
    usemap="#mymap">
    <MAP NAME="mymap">
    <area shape="rect" coords="<?echo("$rilogo_x_start");?>,<?echo("$rilogo_y_start");?>,<?echo("$rilogo_x_end");?>,<?echo( "$rilogo_y_end");?>" onMouseover="doChanges(0)" href="http://www.therationalinvestor.ca/" target="_blank" Title="The Rational Investor" alt="The Rational Investor">
    </MAP>
    </td>
    </tr>
    </table>
    </body>
    Last edited by bbeamish; 04-12-2011 at 04:29 PM. Reason: added [code] [/code] tags

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    *PLEASE* wrap your code in [ code ] ... [ /code ] tags (without the spaces) so it is readable.

    Anyway, an <area> tag *IS* inherently clickable, just exactly like an <a> tag!

    So I don't understand why your mouseover would work but clicking on the <area> would not.

    *******

    This *is* the JavaScript forum and some of us (me inlcluded) don't use PHP. So, instead of showing us a PHP page, bring up the page in your browser, click on the VIEW menu and then on the SOURCE (or PAGE SOURCE) menu item, and copy/paste the HTML of your page here. Again,with the appropriate [code] tags.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I just spent an hour writing a nice message and it all got wiped out because the page timedout when I went to submit the question (ugh!)

    here we go again...

    ty for trying help me with this problem.

    I have scaled the code down and submitted page source (as you asked) to try and simplify things. I don't know where to put so please bear with me. I use a style sheet for my CSS but for here I have included the CSS in the header.

    As you pointed out the <Area> tag (in bold) is linkable and when I move my mouse over the specific area and click - up pops the linked page. I use the javascript function changetext() (in bold) to change the displayed text and it works fine. Unfortunately neither of these are my question. My question is, how do I get the data that is displayed in the side bar (I have put the specific <div> </div> tag in bold) to be linkable. As you can see from the page source, the adr's are all here, its just a question of how do I put an <a href> inside a <div> tag. I am sure it is just a matter of a few lines of code but I can't seem to get my head around it. This may be more of a CSS question but I was hoping there might be a nice little javascript function that would help. Here is the code again:
    Code:
    <html>
     <head>
      <title>The Rational Investor's On The Mining Map - BC</title>
        <style type="text/css">
    .smalltext_otmm {font-family:Helvetica;font-size:.75em;color: blue;}
    .heading_otmm {margin-top:25px;margin-bottom:25px;margin-right:5px;margin-left:5px;width:300px;padding:0em;0em;text-align:center;font-family:Helvetica;font-size:2.0em;}
    div#DBtext_large{font-family:Georgia;font-size:1.15em;color: blue;}
    div#DBtext_link{font-family:Georgia;font-size:.75em;color: blue;text-align:left;width: 100px;}
      </style>
    
    <script type=text/javascript>
    function doChanges(y){
    var z= y; 
    var imagevar = myimages[z];
    var imagethis = this.href; 
    changeimage(imagevar,imagethis);
    changetext(z);
    }
    </script>
    
    <script type=text/javascript>
    function changetext(z){  
    var s= z;
    var textchangeEntries = myArrayEntries[s];
    var id = document.getElementById("DBtext_large");
    id.innerHTML=textchangeEntries;
    
    var textchangeWebadr = myArrayWebadr[s];
    var id = document.getElementById("DBtext_link");
    id.innerHTML=textchangeWebadr;
    
    }
    </script>
    
    <script type=text/javascript>
    function changeimage(towhat,url){
    if (document.images){
    document.images.targetimage.src=towhat.src
    gotolink=url
    }
    }
    
    function warp(){
    window.location=gotolink
    }
    
    </script>
    
    <script type=text/javascript>
    
    var myArrayEntries = ["The Rational Investor","Autism Society of British Columbia","Britannia Mining Museum","Sable Resources","Northgate Minerals","Thompson Creek Metals","Imperial Metals","Western Coal","Peace River Coal","Teck - Coal","Imperial Metals","Teck - Metals","Taseko Mines","Roca Mines","Breakwater","Hillsborough"];
    var myArrayWebadr = ["http://www.the-rational-investor.com","http://www.autismbc.ca/","http://www.bcmuseumofmining.org/","http://sableresources.com/","http://northgateexploration.com/Home/default.aspx","http://www.thompsoncreekmetals.com/s/Home.asp","http://www.imperialmetals.com/s/Home.asp","http://www.westerncoal.com/","http://www.peacerivercoal.com/","http://www.teck.com/Generic.aspx?portalName=tc","http://www.imperialmetals.com/s/Home.asp","http://www.teck.com/Generic.aspx?portalName=tc","http://www.tasekomines.com/tko/Home.asp","http://www.rocamines.com/s/Home.asp","http://www.breakwater.ca/","http://www.hillsboroughresources.com/"];
    
    var myimages=new Array()
    var gotolink="#"
    
    function preloadimages(){
    for (i=0;i<preloadimages.arguments.length;i++){
    myimages[i]=new Image()
    myimages[i].src=preloadimages.arguments[i]
    }
    }
    
    preloadimages("/images/OnTheMiningMap/rilogo.png","/images/OnTheMiningMap/AutismSociety.png","/images/OnTheMiningMap/BritaniaMineMuseum.png","/images/OnTheMiningMap/SableResourcesShasta.png","/images/OnTheMiningMap/Northgate.png","/images/OnTheMiningMap/ThompsonCreek.png","/images/OnTheMiningMap/ImperialMetals.png","/images/OnTheMiningMap/WesternCoal.png","/images/OnTheMiningMap/PeaceRiverCoal.png","/images/OnTheMiningMap/Teck.png","/images/OnTheMiningMap/ImperialMetals.png","/images/OnTheMiningMap/Teck.png","/images/OnTheMiningMap/Taseko.png","/images/OnTheMiningMap/RocaMines.png","/images/OnTheMiningMap/Breakwater.png","/images/OnTheMiningMap/Hillsborough.png");
    
    </script> 
        
     </head>
     <body>
      <table border="1" width="100%"  align="center">
       <tr valign="top">
        <td>
         <table align="center" cellpadding="1" cellspacing="0" width="100%" border="0">      
          <tr>
           <td>        
            <table align="center" cellspacing="5" cellpading="5" width="100%" border="1">
             <tr>
              <td valign="top" align="left">
               <table border="1" width="100%">
                <tr>
                 <td valign="top" width="25%">
                  <table border="0" align="left" width="100%">
                   <tr>
                    <TD valign="center" bgcolor="#CCFFFF" align="center"><a class="heading_otmm">Company Information</a></TD>
                   </TR>
                   <tr>
                    <td width="100%" valign="top">
                     <table width="100%" align="center" cellspacing="1" cellpaddin="1" border="0">
                      <tr> 
                       <td valign="top" align="left"><a href="javascript:warp()"><img src="/images/OnTheMiningMap/rilogo.png" name="targetimage" border="2"></a></td>
                      </tr>
                      <tr>
                       <td valign="top" align="center">
                        <table width="100%" cellspacing="1" cellpadding="1" align="left" valign="top" border="0">
                         <tr>
                          <td valign="top"><a class="smalltext_otmm">Company:</a></td>
                         </tr>
                         <tr>
                          <td valign="top"><div id="DBtext_large">The Rational Investor</div></td>
                         </tr>    
                         <tr>
    
                          <td valign="top"><a class="smalltext_otmm">Web adr:<a/></td>
                         </tr>     
                         <tr>
                          <td valign="top"><div id="DBtext_link">http://www.the-rational-investor.com</div></td>
                         </tr>
                        </table>
                       </td>
                      </tr>
                     </table>
                    </td>
                   </tr>
                  </table>
                 </td>
                 <td width="75%" valign="top">
               <img src="http://www.the-rational-investor.com/images/OnTheMiningMap/BCMapFinallong2_small.png"
    	BORDER="2"
    	usemap="#mymap">
    	<MAP NAME="mymap">
    	<area shape="rect" coords="35,620,70,645" onMouseover="doChanges(0)" href="http://www.therationalinvestor.ca/" target="_blank" Title="The Rational Investor" alt="The Rational Investor">
    	<area shape="rect" coords="370,125,400,150" onMouseover="doChanges(1)" href="http://www.autismbc.ca/" target="_blank" Title="Autism Society of BC" alt="Autism Society of British Columbia">
            </MAP>
                 </td>
                </tr>
               </table>
              </td>
             </tr>
            </table>
           </td>
          </tr>
         </table>
        </td>
       </tr> 
      </table>
     </body>
    </html>
    Thanks again for any assistance/help you may be able to provide,
    Brian
    Last edited by bbeamish; 04-12-2011 at 04:30 PM. Reason: added [code] [/code] tags

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    OK, firstly, this has almost nothing to do with CSS (since you suspected it but weren’t sure), this is a purely functional issue – and the primary function of linking something is done by a link which itself is a structural matter, i. e. a matter of HTML.

    Now, to anser your question: Yes you can put an anchor tag into the div, i. e. wrap it around the PHP tags that output that URL. Also, you need to put the URL into the anchor’s href attribute, so write it like this:
    Code:
    <td valign="top"><div id="DBtext_link"><a href="<?echo("$web_adr_array[0]");?>"><?echo("$web_adr_array[0]");?></a></div></td>

  • #5
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    6
    Thanked 0 Times in 0 Posts
    oh, if only it were that simple!

    Thank you for responding and looking at the code. I have tried your solution (it works fine for the default setting) but I run into major problems when I mouse over an object on the map. Because of the <div> attribute (and really a change in text) the <a href="<?echo("$web_adr_array[0]");?>"> doesn't work when function changetext(z) is initiated. I need to somehow have the a href=" " change too and I can't quite figure that out.

    I was hoping there was a nice little function that would change that too.

    Brian

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Ah, since you’re changing it with innerHTML (after all, this is a JS issue, haha). Then don’t use innerHTML, use nodeValue for the anchor inside the div to change the text node and setAttribute for the href of the anchor.

    Edit:
    I mean something like:
    Code:
    var textchangeWebadr = myArrayWebadr[s];
    var id = document.getElementById("DBtext_link").getElementsByTagName('a')[0];
    id.nodeValue=textchangeWebadr;
    id.setAttribute('href',textchangeWebadr);
    (not tested!)
    Last edited by VIPStephan; 04-12-2011 at 08:44 PM.

  • Users who have thanked VIPStephan for this post:

    bbeamish (04-12-2011)

  • #7
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    6
    Thanked 0 Times in 0 Posts
    ahh, now we are cookin'!
    ty, will work on this eve.
    cheers,
    brian

  • #8
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    6
    Thanked 0 Times in 0 Posts
    well done my friend, with a little tinkering it worked like a charm.

    I have a follow up question if you don't mind...

    Code:
    <div id="DBtext_rssfeed"><?echo("$rss_feed_array2[0]");?></div>
    in this case, I am trying to post an RSS feed. I don't know the javascript for the rss feed but I have a feeling I need to get each rss item (four in this case) through php in the header, assign four individual strings to an array and then put each array into a super array...

    So hear are my questions, if I may
    1. if I have the rss url, how to I get the first four feed items to be assigned to an array (as strings I suppose)?
    2. Once I have the array, can I display it and have the same functionality you helped me with above (data is linkable).

    I don't know the function for 1. but I think once I have that I can put together 2. on my own (with the help you gave me today)

    Or, is there a better / more appropriate way to get an RSS feed to show, keeping in mind my need for the mouseover functionality?

    One down and one to go....you're batting 1000 so far my friend

    Brian


  •  

    Tags for this Thread

    Posting Permissions

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