How do I add links to images in this javascript? - php

Question

I need help please. How do I add links to images in the code below. This is a script that allows visitors to click a choice on a dropdown menu in a form, and every choice changes the image presented. I am trying to add a link to each image that will allow the visitors to hover their mouse over the image and it opens up a larger image.
I just need to know where to add the link. Everytime I add it in the var sel_imgs=[ , it disables the function of changing the images when the visitor selects an option in the dropdown menu.
function diva_imgBySel(objId,theValue) { //v0.1 divaHTML.com
var sel_imgs=["images/md01.jpeg","images/md01.jpeg","images/md02.jpeg","images/md03.jpeg","images/md04.jpeg","images/md06.jpeg","images/md05.jpeg","images/pic07.jpeg","images/pic08.jpeg"];
var d=document;
theValue=sel_imgs[theValue];
if (!theValue || !d.getElementById ) return;
var obj = d.getElementById(objId);
if (obj) obj.src=theValue;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
And here is the form code lower down on the page:
<img src="images/md01.jpeg" alt="" name="theImg" width="147" height="161" id="theImg" style="border: 1px solid #ffffff;" align="LEFT" /><strong>Add a vase:</strong>
<input type="checkbox" name="anniv" id="anniv" value="6.95" onclick="priceUpdate('anniv');"/>
£6.95
</td>
<td width="71%" align="left" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left"></br> <select name="productColors" id="productColors" style="width:270px; margin-bottom:5px; margin-top:5px" onchange="diva_imgBySel('theImg',this.selectedIndex)">
<option value="MD1004">Select Flower Arrangement</option>
<option value="MD1004">Bloom</option>
<option value="MD1001">Majestic</option>
<option value="MD1007">Mothers Day Premium</option>
<option value="MD1002">Mum's the Word</option>
<option value="NF1011">Joyful Orchids</option>
<option value="NF1010">Lily and Rose Hand Tied</option>
<option value="NF1013">Sunflower Sensation</option>
<option value="SF002-free-vase">Tranquililty</option>
</select></td>
Here is the node with the mouseover effect attached. it works fine, but repeats the same large image for each selection the user makes. I need to know how to duplicate this effect for each image not just "md01.jpeg".
<a href="#" rel="imgtip[1]"><img src="images/md01.jpeg" alt="" name="theImg" width="147" height="161" id="theImg" style="border: 1px solid #ffffff;" align="LEFT" /><a/>
<link rel="stylesheet" type="text/css" href="ddimgtooltip.css" />
<script type="text/javascript" src="ddimgtooltip.js">
/***********************************************
* Image w/ description tooltip v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
Here is the code for image mouseover. It is a .js file
/* Image w/ description tooltip v2.0
* Created: April 23rd, 2010. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
var ddimgtooltip={
tiparray:function(){
var tooltips=[]
//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}
tooltips[0]=["images/pic01.jpg"]
tooltips[1]=["images/pic02.jpg"]
tooltips[2]=["images/pic03.jpg"]
tooltips[3]=["images/pic04.jpeg"]
tooltips[4]=["images/pic05.jpeg"]
tooltips[5]=["images/pic06.jpeg"]
return tooltips //do not remove/change this line
}(),
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
//***** NO NEED TO EDIT BEYOND HERE
tipprefix: 'imgtip', //tooltip ID prefixes
createtip:function($, tipid, tipinfo){
if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
)
.css(tipinfo[2] || {})
.appendTo(document.body)
}
return null
},
positiontooltip:function($, $tooltip, e){
var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
$tooltip.css({left:x, top:y})
},
showbox:function($, $tooltip, e){
$tooltip.show()
this.positiontooltip($, $tooltip, e)
},
hidebox:function($, $tooltip){
$tooltip.hide()
},
init:function(targetselector){
jQuery(document).ready(function($){
var tiparray=ddimgtooltip.tiparray
var $targets=$(targetselector)
if ($targets.length==0)
return
var tipids=[]
$targets.each(function(){
var $target=$(this)
$target.attr('rel').match(/\[(\d+)\]/) //match d of attribute rel="imgtip[d]"
var tipsuffix=parseInt(RegExp.$1) //get d as integer
var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it
var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
$target.mouseenter(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.showbox($, $tooltip, e)
})
$target.mouseleave(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.hidebox($, $tooltip)
})
$target.mousemove(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.positiontooltip($, $tooltip, e)
})
if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added)
$tooltip.mouseenter(function(){
ddimgtooltip.hidebox($, $(this))
})
}
})
}) //end dom ready
}
}
//ddimgtooltip.init("targetElementSelector")
ddimgtooltip.init("*[rel^=imgtip]")

Answer 1

This code sample doesn't actually refer to the markup you want to focus on. WHat you've got here is the logic and form elements will change the src of the img tag with an id of 'theImg'. What you need to look at is the element with the 'theImg' id and add a listener there to fire whatever large image effect that you want.

Answer 2

<option value="MD1001"><img src="your_image_path"/>Your non-Link Text</option>
That's how I would lay it out. I'm not sure what exactly your asking for. But this will put an image in there. Just replace the "your_link" , "your_image_path" with your data.