bbeamish
04-11-2011, 04:27 PM
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):
<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>
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):
<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>