SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2001
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help about img/swf changing

    Hi ,

    I have these codes suppose to change one img to the value of the select box value ( something like avatar choose system )

    Code:
    <script langauge='javascript'>
                    <!--
    function show(URL) {
      document.images.newsimg.src = URL+document.theform.newsimglist.options[document.theform.newsimglist.selectedIndex].value;
                      }
    //-->
    </script>
    <select name='newsimglist' onchange="show('http://victory.com/news/')">
    <option value='pht.swf'>me</option>
    <option value='man.jpg'>man</option>
    <option value='girl.gif'>girl</option></select>
    <img src='http://victory.com/news/blank.gif' name='newsimg'>
    The question is how can I modify the code so that the img tag change to <embed> tag for the flash files

    I do appreciate for any help . Thanks

    PHT

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question hmmmmmm

    Uh, don't think you can do that. But a possible solution may be this: (I haven't tested this, may need debugging....)
    Code:
    <style>
    .invisible { display:none }
    </style>
    <script langauge='javascript'>
    <!--
    function show(URL, optObj) 
    	{
    	switch (optObj.label)
    		{
    		case 'image': {
    		swiff.currentStyle.visibility = 'none';
    		pic.src = URL + optObj.value;
    		pic.currentStyle.visibility = 'block';	
    		break;
    		}
    		case 'flash': {
    		pic.currentStyle.visibility = 'none';
    		swiff.src = URL + optObj.value;
    		swiff.currentStyle.visibility = 'block';
    		break;
    		}
    		case default: {
    		alert('Media Type Not Found!');	
    		break;
    		}
    	} // End switch	
        } // End function show()
    -->
    </script>                 
    </head>
    
    <body>
    
    <select onChange="show('http://victory.com/news/',this.options[this.selectedIndex])">
    	<option value='pht.swf' label='flash'>me</option>
    	<option value='man.jpg' label='image'>man</option>
    	<option value='girl.gif' label='image'>girl</option>
    </select>
    
    <img src='http://victory.com/news/blank.gif' id='pic' class='invisible' />
    <embed src='http://victory.com/news/blank.swf' id='swiff' class='invisible' />
    Last edited by beetle; Jul 21, 2002 at 08:18.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Member
    Join Date
    Oct 2001
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks so much for your effort , I also thought that ur sode would works but perhaps there is still some bugs

    first it gave the error after the line of the second break of the switch :
    Code:
    		swiff.currentStyle.visibility = 'block';
    		break;
    		}
    ...mean the close brasket .

    then every time changing options it gave the error at the line of the <select> tag

    I tried to modify like this
    Code:
    <html><head>
    <style> .invisible { display:none } </style>
    <script language='javascript'>
    <!--
    function show(URL) 
    	{
    	switch (document.theform.list.options[document.theform.list.selectedIndex].label)
    		{
    		case 'image': {
    		swiff.currentStyle.visibility = 'none';
    		pic.src = URL+document.theform.list.options[document.theform.list.selectedIndex].value;
    		pic.currentStyle.visibility = 'block';	
    		break;
    		}
    		case 'flash': {
    		pic.currentStyle.visibility = 'none';
    		swiff.src = URL+document.theform.list.options[document.theform.list.selectedIndex].value;
    		swiff.currentStyle.visibility = 'block';
    		break;
    		}
    		case default: {
    		alert('Media Type Not Found!');	
    		break;
    		}
    	} // End switch	
        } // End function show()
    -->
    </script>                 
    </head>
    
    <body>
    <form action="#" name="theform">
    <select onChange="show('http://victory/news/')" name="list">
    	<option value='me.swf' label='flash'>me</option>
    	<option value='man.jpg' label='image'>man</option>
    	<option value='girl.jpg' label='image'>girl</option>
    </select></form>
    
    <img src='http://victory/news/blank.gif' id='pic' class='invisible' />
    <embed src='http://victory/news/blank.swf' id='swiff' class='invisible' />
    </body>
    </html>
    but it still the same with that 2 errors .

    All I trying to do is : I made a news posting page which allow the posters to post news and be able to reuse the uploaded imgs , it would not load all the imgs since there are many but, still able to preview the img (including jpg and flash )

    I still hope for the walkaround .

    Thanks again beetle.

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow...I looked over my original code and I sure did have lots of errors! I must have been sleepy I used visibility instead of display where needed and had improper syntax for the switch's default case AND currentStyle is only valid for reading, not writing. Here, try this:
    Code:
    <html>
    <head>
    <title>test</title>
    <style>
    .invisible { display:none }
    </style>
    <script langauge='javascript'>
    <!--
    function show(URL, optObj)
    	{
    	switch (optObj.label)
    		{
    		case 'image': {
    		swiff.style.display = 'none';
    		pic.src = URL + optObj.value;
    		pic.style.display = 'block';
    		break;
    		}
    		case 'flash': {
    		pic.style.display = 'none';
    		swiff.src = URL + optObj.value;
    		swiff.style.display = 'block';
    		break;
    		}
    		default: {
    		alert('Media Type Not Found!');
    		break;
    		}
    	} // End switch
        } // End function show()
    -->
    </script>
    </head>
    
    <body>
    
    <select onChange="show('http://victory.com/news/',this.options[this.selectedIndex])">
    	<option value='' selected>Pick One</option>
    	<option value='pht.swf' label='flash'>me- flash</option>
    	<option value='man.jpg' label='image'>man- image</option>
    	<option value='girl.gif' label='image'>girl- images</option>
    </select>
    
    <img src='http://victory.com/news/blank.gif' id='pic' class='invisible' />
    <embed src='http://victory.com/news/blank.swf' id='swiff' class='invisible' />
    
    </body>
    </html>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there an assumption that the author wants to mix the two
    media types?!?!?

    Surely you'd want ALL flash or ALL image?


    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  6. #6
    SitePoint Member
    Join Date
    Oct 2001
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Surely you'd want ALL flash or ALL image?
    thanks for this I suddenly figure out what should i do :

    <choice> IMG
    <select> IMGs </select>
    </choice>

    <choice> SWF
    <select> SWFs <select>
    </choice>

    then get the $choice -> $select -> $options

    PS : beetle, it still not running and that 2 errors still occur

    Hopefully I could do this task by this new way .

    thank all .

  7. #7
    SitePoint Member
    Join Date
    Oct 2001
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there's still one question left , please help me the last time :

    How do I control these radio?

    Use Picture :

    <radio name=pic value=1> IMG (local) </radio>
    <radio name=pic value=2> SWF (local) </radio>

    ---------------

    Picture options :

    <radio name=opt value=1 checked> local </radio>
    <radio name=opt value=2> link imgs </radio>

    ... So when I check a "use picture" option (mean local) the option at "picture option" checks the "local" ... or if I input the link in another box for link img , the option of "picture option" checks the "link imgs" radio and uncheck the "use picture" radios .

    thanks in advance

  8. #8
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use the onclick event for the radio buttons to trigger javascript functions for your desired effects.

    For the input - i suggest you use the onchange - so that
    when they leave the field after changing it - THEN
    the action happens - otherwise using onfocus or onclick might take the user by surprise.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  9. #9
    SitePoint Member
    Join Date
    Oct 2001
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks so much , I'll try to code it later


Bookmarks

Posting Permissions

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