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 9 of 9

Thread: onrollover

  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts

    onrollover

    All,
    I basically created a tagged photo and put the coordinates in the database. Now I want to be able to read these from the database and when someone mouse overs the hotspot or however I need to display it, it shows the box that was tagged. Any ideas on how to do this?

    Thanks in advance.

  • #2
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    The code I use to display this in the first place is:
    PHP Code:
    <?php
    $qrygettag 
    "select * from tags where picture_id='$picture_id'";
      
    $resulttag mysql_query($qrygettag);
      while(
    $resultsettag mysql_fetch_array($resulttag)){

    ?>
     <!--
      Each "fn-area" class element contains a note, and must have a unique ID,
      the format of which can be anything/random.
     -->
     <?php
     
    echo "<div class=\"fn-area\" id=\"$resultsettag[tag_id]\" style=\"left: ".$resultsettag['height1']."px; top: ".$resultsettag['width1']."px; width:".$resultsettag['height2']."px; height: ".$resultsettag['width2']."px\">";

     echo 
    "<div class=\"fn-note\">";
      echo 
    "<div class=\"fn-note_id\" id=\"$resultsettag[tag_id]\"></div>";

     
    ?>
      <!--
       The note itself is the first DIV inside the fn-area element.
       It must have a "fn-note" class applied, and children with these classes:
      -->
      <?php
      
    echo "<span class=\"fn-note-content\">$resultsettag[tagged_user]</span>";
      
    ?>
      </div>

     </div>
    <?php
    }
    ?>

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Ummm...HTML can do this for you.

    Look into <map> and <area> tags.

    I *certainly* wouldn't try to do it using absolutely positioned <div>s when <map> has been around since 1997 or so.

    If you don't mind looking at MS docs, here:
    http://msdn.microsoft.com/en-us/libr...50(VS.85).aspx

    And, yes, <area> tags can use onmouseover, onmouseout, et al.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I assume you are trying to use somebody's library there, what with the "fn-note" stuff.

    Can't see why it wouldn't work, even if I do think it is overkill.

    So what is your problem with it????

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    You're right, I am using someone else's code. So I need those to display it correctly. Everything displays fine but they show up when the page loads. I don't want them to show up until someone mouses over them or someone goes over a link to show the same div tag. Similar to how facebook does it. I tried to make the div hidden but that didn't seem to work. So an image loads and then the divs go on top of the image but using the height1, width1 etc. I don't want these to show up until I rollover these coordinate on the image. I hope that makes sense.

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    Actually this is ok, I set the background to transparent and it doesn't show up. Is there a way to control the div style with a mouseover? So I can add a border and a background image when i scroll over it?

    I tried to do this but it didn't work:
    PHP Code:
    echo "<div class=\"fn-area\" id=\"$resultsettag[tag_id]\" style=\"left: ".$resultsettag['height1']."px; top: ".$resultsettag['width1']."px; width:".$resultsettag['height2']."px; height: ".$resultsettag['width2']."px\" onmouseover=\"this.style.backgroundColor=".'#000000'.";\" onmouseout=\"this.style.backgroundColor=".'#000000'.";\">"
    I'd like to add a background image instead of changing the background color ideally. If that's possible.

    Thanks.
    Last edited by treeleaf20; 10-27-2009 at 02:28 AM.

  • #7
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    Ok, so I used CSS to take care of that part. Is there anyway to rollover a link and have that same div highlighted on the image?

  • #8
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    Ahh, now I see what you are talking about. With the <div> sometimes the data I have after that be behind the image. Is there a way to make sure it's after the <div> with the image in it so it doesn't stay behind it?

    I'm actually not sure why the text goes behind the image. Since <div> tags act like new paragraphs. Why wouldn't my other data be after the <div>

    The whole code that is giving me the problem is:
    PHP Code:
    <div id="fn-canvas-id" class="fn-canvas fn-container-active" style="width: 400px; height: 320px;">
    <div id="test_dog" class="fn-container fn-container-active" style="top:10px;">
     <!--
      Have an IMG tag as the first tag inside your container.
     -->
    <?php 
    echo "<img src=\"uploaded_files/$resultsetstory[image_id]\" onclick=\"javascript:getpic(this.myform2);\">";

      
    $qrygettag "select * from tags where picture_id='$picture_id'";
      
    $resulttag mysql_query($qrygettag);
      
    $resulttagnum mysql_num_rows($resulttag);
      if(
    $resulttagnum>0){
      echo 
    "In this photo: ";
      }
      
    $i=0;
      while(
    $resultsettag mysql_fetch_array($resulttag)){
    $i++;
    if(
    $i==$resulttagnum){
    echo 
    "<a href=\"viewuser.php?user_name=$resultsettag[tagged_user]\" onmouseover=\"visVisible(".'4'.")\" onmouseout=\"visHidden(".'4'.")\">$resultsettag[tagged_user]</a> (<a href=\"delete.php?action=deletetag&picture_id=$picture_id&tag_id=$resultsettag[tag_id]\">Remove Tag</a>)";
    }
    else{
    echo 
    "<a href=\"viewuser.php?user_name=$resultsettag[tagged_user]\" onmouseover=\"visVisible(".'4'.")\" onmouseout=\"visHidden(".'4'.")\">$resultsettag[tagged_user]</a> (<a href=\"delete.php?action=deletetag&picture_id=$picture_id&tag_id=$resultsettag[tag_id]\">Remove Tag</a>)".", ";
    }

    ?>

     <!--
      Each "fn-area" class element contains a note, and must have a unique ID,
      the format of which can be anything/random.
     -->
     <?php
    echo "<div class=\"fn-area\" id=\"$resultsettag[tag_id]\" style=\"left: ".$resultsettag['height1']."px; top: ".$resultsettag['width1']."px; width:".$resultsettag['height2']."px; height: ".$resultsettag['width2']."px\">";

     echo 
    "<div class=\"fn-note\">";
      echo 
    "<div class=\"fn-note_id\" id=\"$resultsettag[tag_id]\"></div>";

     
    ?>
      <!--
       The note itself is the first DIV inside the fn-area element.
       It must have a "fn-note" class applied, and children with these classes:
      -->
      <?php
      
    echo "<span class=\"fn-note-content\">$resultsettag[tagged_user]</span>";
      
    ?>
      </div>

     </div>
    <?php
    }
    ?>
     <!--
      Insert more notes here!
     -->


     <!--
      The control bar must have "fn-controlbar fn-controlbar-inactive" applied.
      The script will change "fn-controlbar-inactive" to "fn-controlbar-active" as needed.
      It must contain children with the listed classes.
     -->
     <div class="fn-controlbar fn-controlbar-active">
     <?php
    if($resultsetstory['user_name']==$_SESSION['user_name']){
     
    ?>
         <span class="fn-controlbar-add-inactive"></span>
    <?php
    }
    ?>
      </div>

     <!--
      The rules for the edit bar are the same as for the control bar.
     -->
     <form style="visibility: hidden; opacity: 0;" class="fn-editbar fn-editbar-inactive" name="fn_editbar" id="fn_editbar">

    <div class="fn-editbar-fields">  <label> <input hidden="" class="fn-editbar-author" name="author" value="" type="hidden"> </label>  <label> <input class="fn-editbar-entry_id" name="entry_ID" value="<?php echo $picture_id?>" type="hidden"> </label> </div>
                  
    <div class="fn-editbar-fields"><label> Select Creep to Tag: </label>
    <select class="fn-editbar-content" name="content">
    <?php
    $qryfav 
    "select favorite_user from favorites where user_name='$_SESSION[user_name]'";
    $resultfav mysql_query($qryfav);
    while(
    $resultsetfav mysql_fetch_array($resultfav)){
    echo 
    "<option value=\"$resultsetfav[favorite_user]\">$resultsetfav[favorite_user]</option>";
    }
    ?>
    </select>


     </div>        
    <div class="fn-editbar-fields">
    <span class="fn-editbar-ok"> </span>
    <span class="fn-editbar-cancel"> </span>
    </div>

     </form>

    </div> <!-- / fn-container-->
    </div> <!-- / fn-canvas-->
    Last edited by treeleaf20; 10-27-2009 at 03:49 AM.

  • #9
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    You need to manipulate the DOM. You can change attributes (whether hide(), show(), etc.) You can change other attributes, like size, color, font, margin, innerHTML, and so many other things.

    Here is a decent, easy tutorial: http://www.w3schools.com/htmldom/default.asp

    From there, use your imagination and logic. I have a routine that displays one of the 50 state flags, depending on what the user selects. All flags loaded as image in html <div> as hidden. User makes selection in form, the flag with id that matches selection value is changed to visible. User changes selection again, current flag changed back to hidden, new flag changed to visible...


  •  

    Posting Permissions

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