...

View Full Version : onrollover



treeleaf20
10-26-2009, 10:40 PM
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.

treeleaf20
10-27-2009, 12:32 AM
The code I use to display this in the first place is:


<?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
}
?>

Old Pedant
10-27-2009, 02:50 AM
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/library/ms535850(VS.85).aspx

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

Old Pedant
10-27-2009, 02:54 AM
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????

treeleaf20
10-27-2009, 03:09 AM
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.

treeleaf20
10-27-2009, 03:18 AM
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:

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.

treeleaf20
10-27-2009, 03:38 AM
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?

treeleaf20
10-27-2009, 04:36 AM
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:

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

jeffmatthews
10-27-2009, 07:01 AM
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...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum