4 Replies - 900 Views - Last Post: 28 February 2012 - 06:49 PM

#1 damara23  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 28-February 12

images appear from selecting option in pull down menu?

Posted 28 February 2012 - 01:24 PM

I have a shopping cart related question. I've wasted a couple of days trying to search for answers; I'm guessing javascript is what I'll need?

I'd like to design my pull down menu so that when visitors choose an item, the corresponding image of the item will show. Just like this site's.
http://www.doggonego...1&ParentCat=203

How can I do this?

I signed up for Paypal's shopping cart. I haven't started building my cart yet.

I appreciate any suggestions/help!!!

Is This A Good Question/Topic? 0
  • +

Replies To: images appear from selecting option in pull down menu?

#2 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: images appear from selecting option in pull down menu?

Posted 28 February 2012 - 02:20 PM

Do you mean a dropdown menu that chooses a list of items to show?

How much programming experience do you have?

Start here for the dropdown menu:
Drop down form tutorial

The application at:
http://www.doggonego...1&ParentCat=203
uses Coldfusion.

Cold Fusion

Personally I would use php, but that's just because that's what I know and like.

The dropdown you want would be either a get or post form.
POST and GET tutorial

This post has been edited by hiddenghost: 28 February 2012 - 02:21 PM

Was This Post Helpful? 0
  • +
  • -

#3 damara23  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 28-February 12

Re: images appear from selecting option in pull down menu?

Posted 28 February 2012 - 02:48 PM

I'm not familiar with php. I know html. Years ago when I created a couple of small sites, I used dreamweaver.
I think I still have cold fusion version 5. Pretty dated I'm sure but may still do the trick.

Paypal gives me the dropdown menu, I just fill in the option value.

I just really needed to know how to get the images to show up with each selected choices from my dropdown menu.
Will coldfusion help me there?
Was This Post Helpful? 0
  • +
  • -

#4 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: images appear from selecting option in pull down menu?

Posted 28 February 2012 - 03:35 PM

You can use display none in css and display block in the javascript to get the images to show.

I'll post back with some code here in a bit.

For now you might want to search for these terms in google to get an idea of what's needed.
  • css display hidden
  • document.getElementById
  • DOM
  • DOM childnode
  • DOM parentnode
  • javascript style


Don't worry it's actually not too complicated.

This post has been edited by hiddenghost: 28 February 2012 - 06:47 PM

Was This Post Helpful? 0
  • +
  • -

#5 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: images appear from selecting option in pull down menu?

Posted 28 February 2012 - 06:49 PM

This is a mechanism that you could use.
You probably won't be able to just copy this into your present interface to use it because it would take significant editing to make it work.
It's mostly just a demonstration of what might work.
<html>
<head>
<style type="text/css">
#text1, #text2, #text3{
 display: none;
 border: 1px solid black;
}
</style>
</head>
<body>
<div id="showOptions">
    <select>
        <option>Show Text One</option>
        <option>Show Text Two</option>
        <option>Show Text Three</option>
    </select>
</div>
<p id="text1">I like pizza.</p>
<p id="text2">Veggies are good on pizza.</p>
<p id="text3">Parmesan goes well with pizza.</p>

<script type="text/javascript">
var selectContent = document.getElementById("showOptions");

selectContent.childNodes[1].childNodes[1].addEventListener("click",
    (function(){
        document.getElementById("text1").style.display = "block";
    }), false);
selectContent.childNodes[1].childNodes[3].addEventListener("click",
    (function(){
        document.getElementById("text2").style.display = "block"; 
    }), false);
selectContent.childNodes[1].childNodes[5].addEventListener("click",
    (function(){
        document.getElementById("text3").style.display = "block"; 
    }), false);
    
selectContent.childNodes[1].childNodes[1].addEventListener("click",
    (function(){
        var content = [];
        content[0] = document.getElementById("text2");
        content[1] = document.getElementById("text3");
        for(i = 0; i <= 1; i = i + 1){
            if(content[i].style.display === "block"){
                content[i].style.display = "none"; 
            }
        }
    }), false);
selectContent.childNodes[1].childNodes[3].addEventListener("click",
    (function(){
        var content = [];
        content[0] = document.getElementById("text1");
        content[1] = document.getElementById("text3");
        for(i = 0; i <= 1; i = i + 1){
            if(content[i].style.display === "block"){
                content[i].style.display = "none"; 
            }
        }
    }), false);
selectContent.childNodes[1].childNodes[5].addEventListener("click",
    (function(){
        var content = [];
        content[0] = document.getElementById("text1");
        content[1] = document.getElementById("text2");
        for(i = 0; i <= 1; i = i + 1){
            if(content[i].style.display === "block"){
                content[i].style.display = "none"; 
            }
        }
    }), false);
</script>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1