Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    (Help) Picture change when dropdown list selected

    Hi... first of all, sorry for my bad english.

    I need your helps about dropdown list.
    here is the situation:
    my dropdownlist list: Bali, Jakarta, Lombok, Raja Ampat, Pulau Seribu, Singapore
    when i choose one of them i want the other table show picture that show about that place. how to do that without using javascript.
    here is the code
    Code:
     
    <select name="settingtourcity" style="width:150px">
                  <option value="Bali" selected>Bali</option>
                  <option value="Lombok" >Lombok</option>
                  <option value="PulauSeribu" >Pulau Seribu</option>
                  <option value="KarimunJawa" >Karimun Jawa</option>
                  <option value="RajaAmpat" >Raja Ampat</option>
                  <option value="SPORE" >Singapur</option>
                  
                </select>
    here the table:


    Can I change the image when i choose one of the list when the picture is in different table?? if can't what should i do with the picture??

    thanks :)

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    to do that without using javascript.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>HomePage</title>
    <style type="text/css">
    .ima { display: none; }
    .hov:hover>div { display: block; }
    </style>
    </head>
    
    <body>
    
    <div class="hov" style="width:80px;float:left;">Some Link
    <div class="ima" style="float:left;"><img src="images/1.jpg" width="150" /></div>
    </div>
    
    <div class="hov" style="width:80px;float:left;">Some Link
    <div class="ima" style="float:left;"><img src="images/2.jpg" width="150" /></div>
    </div>
    
    <div class="hov" style="width:80px;float:left;">Some Link
    <div class="ima" style="float:left;"><img src="images/3.jpg" width="150" /></div>
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

  • Users who have thanked sunfighter for this post:

    Sonataxx (01-19-2014)

  • #3
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    to do that without using javascript.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>HomePage</title>
    <style type="text/css">
    .ima { display: none; }
    .hov:hover>div { display: block; }
    </style>
    </head>
    
    <body>
    
    <div class="hov" style="width:80px;float:left;">Some Link
    <div class="ima" style="float:left;"><img src="images/1.jpg" width="150" /></div>
    </div>
    
    <div class="hov" style="width:80px;float:left;">Some Link
    <div class="ima" style="float:left;"><img src="images/2.jpg" width="150" /></div>
    </div>
    
    <div class="hov" style="width:80px;float:left;">Some Link
    <div class="ima" style="float:left;"><img src="images/3.jpg" width="150" /></div>
    </div>
    </body>
    </html>

    thanks for your help, but how it connected to my dropdownlist??


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •