Whats wrong with this?? 2

[idaryl]

I have a script that works fine on a Mac but... on a PC well

here is the url

http://www.designedimage.com/changetester/index.html

can anyone help me with this - I get an error about Object Expected, but all the fixes I've tried don't seem to work.

Please help

• idaryl •

http://www.designedimage.com

•

 

[vongrunt]

There is no "contractorSKU" field. Either add it to form or remove last eval() from swapContractor() function.

 

[BillyRayPreachersSon]

The element "document.selectContractor.contractorSKU" does not exist. Suggest you look into the onChange event on your select box.

Hope this helps,
Dan

 

[idaryl]

Thank you Vongrunt - I've given you a "star" There is something else though - I want to use this code for another client but have each image (option) as a link - is this possible?

• idaryl •

http://www.designedimage.com

•

 

[LFI]

You can assign events to images and make them appear to be links like:

<img src="stone.bmp" border="0" onclick='alert("hey!");' onmouseover='this.style.cursor="hand"' style='border:"solid 1 blue"' />

...replacing my alert with a call to some redirect function.

Is that what you mean?

--Dave

 

[idaryl]

Huh! I'm talking about adding the function to a script I'm already using.......? Doh!

• idaryl •

http://www.designedimage.com

•

 

[LFI]

I misunderstood.

Your question didn't seem to make sense, making the options links. What would you have the links do? Why not just assign whatever link functionality you want to the select list's onchange event?

I figured you were asking to make the images that come up when you change the options into links.

 

[idaryl]

I have a series of client/contractors that have individual sites - but from the main pull-down see - the url

http://www.designedimage.com/changetester/index.html

there was an issue with the file on a PC (which Vongrunt helped) {originally it was to show alternate contractors for given areas - as shown in the menu selection eg: Building material: Block and Brick)

now... the client wants to be able to click on the image shown and have another page open with the contractors site.

so all I was asking is if there was a way to add that function to the existing one I stated with - right now the onchange event applys to a certain image - is there a way to add the url to that image - I have 33 images in the array -
here is the function

function swapContractor(formName, selectName, itemName, img) {
    var i = eval('document.'+formName+'.'+selectName+'.selectedIndex');
    var p = eval('document.'+formName+'.' + selectName+ '.options['+i+'].value');
    path = p.split("|");
    var src= path[0];
    img.src=src;
}

and here is the call

<select class="smallcopy" name="select_61" onChange="javascript:swapContractor('selectContractor', 'select_61', 'contractorSKU', contractor);">

thats about the best I can explain it...


• idaryl •

http://www.designedimage.com

•

 

[LFI]

Okay. Idea:

Change the HTML's image (IMG) tag to:

<img src="start.gif" name="contractor" width="360" height="264" border="0" alt="repair" [b]goto='' onmouseover='(this.goto!=""?this.style.cursor="hand":"")' onclick='(this.goto!=""?document.location=this.goto:"")'[/b] />

This preps the image to behave like a link when the goto parameter has a value (which it does not, initially). When it DOES have a value, the cursor will be a hand when it passes over it and the onclick event will redirect the page to the goto value.

Then, for those options on your drop-down list that you want to be links, add another |-partitioned value to the VALUE parameter. For example:

<option value="repair.gif|repair|[URL unfurl="true"]http://www.google.com">Appliance[/URL] Repair</option>

This way, only the options you want to be links will be links.

Finally, in the swapContractor function, add at the end:

    img.goto = path[2];
    if(img.goto)
    {
     img.style.border="solid 2 blue";
    }
    else
    {
     img.goto = ""; //seems redundant, but needed
     img.style.border="0";
    }

This will put that familiar blue border we associate with links around the image and set the goto value to something that the onmouseover and onclick events of the IMG tag will recognize.

Try it out.

--Dave

 

[idaryl]

OK I did all you said see this

http://http://www.designedimage.com/changetester/index2.html

and see if it works for you - does'nt for me - possibly its breaking here? (line 65)

<select class="smallcopy" name="select_61" onChange="javascript:swapContractor('selectContractor', 'select_61', 'contractorSKU', contractor);">

• idaryl •

http://www.designedimage.com

•

 

[LFI]

When I View Source on your code, it appears that the cut-and-paste job that went into the function swapContractor was full of foreign characters. Perhaps that's just my editor.

What I noticed is that you close/end the function swapContractor early. Remove the close-curly-brace before "img.goto = path[2];" and uncomment-out the close-curly-brace before the following close-SCRIPT (</script>) tag.

--Dave

 

[idaryl]

like this?

img.goto = path[2];
    if(img.goto)
{
     img.style.border="solid 2 blue";
    }
    else
    {
     img.goto = ""; //seems redundant, but needed
     img.style.border="0";
}

• idaryl •

http://www.designedimage.com

•

 

[LFI]

This is what I see when I 'View Source':

function swapContractor(formName, selectName, itemName, img) {
    var i = eval('document.'+formName+'.'+selectName+'.selectedIndex');
    var p = eval('document.'+formName+'.' + selectName+ '.options['+i+'].value');
    path = p.split("|");
    var src= path[0];
    img.src=src;
}[b]//where your function currently ends[/b]

img.goto = path[2];
ÝÝÝÝif(img.goto) {[b]//where did all the 'Ý's come from?[/b]
ÝÝÝÝÝimg.style.border="solid 2 blue";
ÝÝÝÝ}
ÝÝÝÝelse
ÝÝÝÝ{
ÝÝÝÝÝimg.goto = ""; //seems redundant, but needed
ÝÝÝÝÝimg.style.border="0";
}
<!--}-->

This is what I should see:

function swapContractor(formName, selectName, itemName, img) 
 {
  var i = eval('document.'+formName+'.'+selectName+'.selectedIndex');
  var p = eval('document.'+formName+'.' + 
   selectName+ '.options['+i+'].value');
  path = p.split("|");
  var src= path[0];
  img.src=src;

  img.goto = path[2];
  if(img.goto) 
  {
   img.style.border="solid 2 blue";
  }
  else
  {
   img.goto = ""; //seems redundant, but needed
   img.style.border="0";
  }
 }[b]//the true close of the function[/b]

Can you see the difference? Aside from those weird foreign characters, the goto/border stuff needs to be included IN the function.

Try that out. Let us know how it goes.

--Dave

 

[idaryl]

EEEE"s thats what I was seeing, so I strpped them out and go back to see (where did they come from??????)

http://www.designedimage.com/changetester/index2.html

--

Changed the border line to white - does'nt really go with the design (besides there will be instructions on every picture anyway) --

but,, it opens the new page in the same page - the client wants to open the contractors pages in a new window - that way the main site is still active..

• idaryl •

http://www.designedimage.com

•

 

[idaryl]

thanks for your help by the way

• idaryl •

http://www.designedimage.com

•

 

[LFI]

Try changing my little onclick-thingie:

onclick='(this.goto!=""?document.location=this.goto:"")'

...to:

onclick='(this.goto!=""?[b]window.open(this.goto)[/b]:"")'

I think that should do it.

--Dave

 

[idaryl]

yep - it did thank you so much and a vote for you

• idaryl •

http://www.designedimage.com

•