ddimgtooltip query

[godoba]

1) Script Title: ddimgtooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...agetooltip.htm

3) Describe problem: I have been trying to find a solution to my problem on different forums, but to no avail. I found this forum based on a similar question I had; but in this forum there was no answer to that question: http://www.dynamicdrive.com/forums/s...ad.php?t=61131

I pasted most of my code in another forum and the evolution of my problem is explained in this thread clearly and my ultimate frustration in not receiving full instructions on how to correct my problem. Any help would be greatly appreciated; this is the last problem I have before launching my site. Here is the thread with my original question: http://stackoverflow.com/questions/1...his-javascript

My sincerest apologies if this breaks forum rules, by posting the link to the question that was posted on another forum. Its just that everything was explained in that thread in detail.

Thank you

[ddadmin]

Ah ok I've had to read that thread on stackoverflow carefully to piece together the issue you're talking about. Try replacing your original div_img() function:

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

with the below version instead:

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; imgindex=theValue-1;
    theValue=sel_imgs[theValue];
    if (!theValue || !d.getElementById ) return;
    var obj = d.getElementById(objId);
    if (obj) obj.src=theValue;
		obj.parentNode.setAttribute('rel', 'imgtip['+imgindex+']')
		$(obj.parentNode).unbind()
		$('div.ddimgtooltip').hide()
		if (imgindex>=0)
			ddimgtooltip.init("*[rel^=imgtip]")
}

It adds code that reinitializes the tooltip script each time the select menu changes, feeding the index number of the new image to show to the tooltip script.

[godoba]

IT WORKS!!!!! WOW, Thank you soooooo much, this has bugged me whole weekend. I can finally launch. Glad I visited the right forum this time. When my brain can function again, I will spend some time studying the code to see how it works exactly, for now just glad it works.

[godoba]

Please forgive me if I am meant to post this as a new thread; its just that it actually relates to my query that was just solved.

My follow up question is this:

I have three dropdowns on the same page; one of which the images are different to the other two dropdowns. I was able to set it up for the first two dropdowns; but how do I set it up for the third which has different images. Do I rename the .js file and have that one call up the different .js? If so which elements or headings in the that file do I altar so that it does not clash with the other elements? Or is there something in the original .js that I can add to affect my third dropdown?

To see what I mean, you can visit my page at www.belatemenot.com/order_new.html

Sorry for the follow up

[ddadmin]

Your third drop down instance is missing the required <a> element that should wrap around its enlarged image, ie:

<td width="29%" height="176" align="center" valign="top"><p><a href="#" rel="imgtip[1]"><img src="images/pic03.jpg" alt="" name="theImg" width="147" height="161" id="theImg2" style="border: 1px solid #ffffff;" ALIGN="LEFT"></a><strong>Add a vase:</strong><input type="checkbox" name="valentine" id="valentine" value="6.95" onclick="priceUpdate('valentine');"/>

[godoba]

Thanks. Yeah I purposefully left that out because it was not performing the function i needed. The third dropdown instance has a set of images that are different to the other two. I am trying to find out how do I point the third instance to a different group of pictures, and not to the same ones as the other two.

Apologies if its not that clear.

[ddadmin]

By default the script uses the selected option's index number relative to its peers to determine which content within the tiparray[] of ddimgtooltip.js to show. If you have multiple select menus, this method of accessing the correct tip content no longer works. An alternative method in this case is to specify the index number of the correct image to show inside each option's value attribute, ie:

                <option value="0">Dozen Luxurious Roses</option>
                <option value="1">Forever Mine</option>
                <option value="2">Marvellous Mix</option>
                <option value="3">My Sweetness</option>

And modify the script accordingly for this. Are you currently using the option's value attribute to store important info?

[godoba]

I am definitely willing to change the option values to what you suggested; as long as it gets the job done in reflecting the correct image in the .js file.

How would I modify the script to make this work?

Would I have to altar the below code in the html page too, or just the .js file:

var d=document; imgindex=theValue-1;
    theValue=sel_imgs[theValue];
    if (!theValue || !d.getElementById ) return;
    var obj = d.getElementById(objId);
    if (obj) obj.src=theValue;
		obj.parentNode.setAttribute('rel', 'imgtip['+imgindex+']')
		$(obj.parentNode).unbind()
		$('div.ddimgtooltip').hide()
		if (imgindex>=0)
			ddimgtooltip.init("*[rel^=imgtip]")
}

Thanks for all your help on this.

[ddadmin]

Just replace the body of your original function with:

    var d=document; imgindex=theValue-1;
    theValue=sel_imgs[theValue];
    if (!theValue || !d.getElementById ) return;
    var obj = d.getElementById(objId);
    if (obj) obj.src=theValue;
		var tipindex = parseInt(selectobj.options[selectobj.selectedIndex].value-1)
		if (isNaN(tipindex))
			return
		obj.parentNode.setAttribute('rel', 'imgtip['+tipindex+']')
		$(obj.parentNode).unbind()
		$('div.ddimgtooltip').hide()
		if (imgindex>=0)
			ddimgtooltip.init("*[rel^=imgtip]")

Then for each of your select menus, note the changes in red:

<select name="productColors" id="productColors" style="width:270px; margin-bottom:5px; margin-top:5px" onchange="diva_imgBySel('theImg',this.selectedIndex,this)">
                <option value="1">Select Flower Arrangement</option>
                <option value="2">Bloom</option>
                <option value="3">Majestic</option>

</select>

So apart from entering the index number of the desired image to show inside each option (where 1=1st image within tiparray, 2=2nd etc), you should also passan extra "this" to your onChange event handler.

[godoba]

THanks!

ok I changed it all, and now the images that popup are are exact same image for each selection in the dropdown. In this case the image that is in the node is the one that repeats for each selection.

Here is all the code I have placed.

function diva_imgBySel(objId,theValue) { //v0.1 divaHTML.com
    
    var sel_imgs=["images/pic01.jpg","images/pic01.jpg","images/pic02.jpg","images/pic03.jpg","images/pic04.jpeg","images/pic05.jpeg","images/pic06.jpeg","images/pic07.jpeg","images/pic08.jpeg"];
    
  var d=document; imgindex=theValue-1;
    theValue=sel_imgs[theValue];
    if (!theValue || !d.getElementById ) return;
    var obj = d.getElementById(objId);
    if (obj) obj.src=theValue;
		var tipindex = parseInt(selectobj.options[selectobj.selectedIndex].value-1)
		if (isNaN(tipindex))
			return
		obj.parentNode.setAttribute('rel', 'imgtip['+tipindex+']')
		$(obj.parentNode).unbind()
		$('div.ddimgtooltip').hide()
		if (imgindex>=0)
			ddimgtooltip.init("*[rel^=imgtip]")
}

<td width="29%" height="192" align="center" valign="top"><p><a href="#" rel="imgtip[0]"><img src="images/pic01.jpg" alt="" name="theImg" width="147" height="161" id="theImg" style="border: 1px solid #ffffff;" align="LEFT" /></a><strong>Add a vase:</strong><input type="checkbox" name="anniv" id="anniv" value="6.95" onclick="priceUpdate('anniv');"/>
             &pound;6.95
            </td>
          <td width="71%" align="left" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="left"></br>&nbsp;&nbsp;&nbsp;&nbsp;<select name="productColors" id="productColors" style="width:270px; margin-bottom:5px; margin-top:5px" onchange="diva_imgBySel('theImg',this.selectedIndex,this)">
                <option value="1">Select Flower Arrangement</option>
                <option value="2">Fabulous Freesia</option>
                <option value="3">Lily and Rose Hand Tied</option>
                <option value="4">Dozen Luxurious Roses</option>
                <option value="5">Beautiful Blues</option>
                <option value="6">Happiness</option>
                <option value="7">Pure White</option>
                <option value="8">Sunflower Sensation</option>
                <option value="9">Tranquililty</option>
                </select></td>

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", "&nbsp;Skillfully embedded in green hyperion,this selection of </br>&nbsp;fresh freesia makes an enchanting bouquet.", {background:"#FFFFFF", font:"bold 12px Arial"}]
		tooltips[1]=["images/pic02.jpg", "&nbsp;Lovely lilies mixed with long stemmed pink roses,</br>&nbsp;with green foliage complimenting this beautiful bouquet.", {background:"#FFFFFF", font:"bold 12px Arial"}]
		tooltips[2]=["images/pic03.jpg", "&nbsp;In bull bloom, these 12 roses luxuriously define romance</br>&nbsp;and elegance.", {background:"#FFFFFF", font:"bold 12px Arial"}]
		tooltips[3]=["images/pic04.jpeg", "&nbsp;Set against exotic palm leaves, these blue and green blooms</br>&nbsp;mix well with the lilies, iris and delightful daisies.", {background:"#FFFFFF", font:"bold 12px Arial"}]
		tooltips[4]=["images/pic05.jpeg", "&nbsp;Colourful Gerberas, fresh lilies, blue Statis and cute </br>Carnations,&nbsp;truly brings back the joy of receiving flowers.", {background:"#FFFFFF", font:"bold 12px Arial"}]
		tooltips[5]=["images/pic06.jpeg", "&nbsp;Stunning white Gerberas, Sensational White Daisies and </br>&nbsp;Lime Green Roses,make up this peaceful bouquet.", {background:"#FFFFFF", font:"bold 12px Arial"}]
		tooltips[6]=["images/pic07.jpeg", "&nbsp;Fresh Sunflowers, lime green carnations and yellow roses </br>&nbsp;surrounded by folded aspidistra leaves.", {background:"#FFFFFF", font:"bold 12px Arial"}]
		tooltips[7]=["images/pic08.jpeg", "&nbsp;Beautiful white lilies and yellow tulips.", {background:"#FFFFFF", font:"bold 12px Arial"}]
		tooltips[8]=["images/pic08.jpeg", "&nbsp;this is a test.", {background:"#FFFFFF", font:"bold 12px Arial"}]
		tooltips[9]=["images/pic08.jpeg", "&nbsp;this is a second test.", {background:"#FFFFFF", font:"bold 12px Arial"}]

		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

Really sorry for all this. Thanks again.