Default image and sound |
Default image and sound |
tudsy |
Feb 8 2018, 08:39 AM
Post
#1
|
Advanced Member Group: Members Posts: 246 Joined: 30-September 14 Member No.: 21,611 |
Hi guys
I am trying to load an image and sound file (default) after the user has selected an option (image), played the sound and clicked the default option in the select tag ('click-tap here to view/select Adrian Tudini's art'). When the page loads (and refreshed) it loads the default image and sound. Any help will be greatly appreciated. Thanks. The program in full: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0"/> <link type="text/css" rel="stylesheet" href="Main.css"/> <style type ="text/CSS"> div.absolute{ position:absolute; top:200px; } div { height: auto; /*if more info comes on the page, it will stretch down*/ width: auto; margin: 0 auto; /*this will cause the div to be in the center*/ } </style> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-908952-3', 'auto'); ga('send', 'pageview'); ga('require','linkid'); </script> <script> var personsnamejs ='AdrianTudini'; var personpicture = personsnamejs + '.jpg'; var priceofartarray = ["2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2"]; var personpath = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personsnamejs + '/' + personpicture; function setvar(){ var x = document.getElementById('Title'); x.style.color = '#00FF00'; x.style.fontSize ='36px'; document.getElementById('PersonImage').src = personpath; var z = document.getElementById('PlaySound'); z.style.color = '#00FF00'; z.style.fontSize ='24px'; var t = document.getElementById('paypal'); t.style.color = '#00FF00'; t.style.fontSize ='24px'; var u = document.getElementById('freename'); u.style.color = '#00FF00'; u.style.fontSize ='20px'; var v = document.getElementById('freeaddress'); v.style.color = '#00FF00'; v.style.fontSize ='20px'; var c = document.getElementById('reason'); c.style.color = "#00FF00"; c.style.fontSize = "36px"; var d = document.getElementById('Buy'); d.style.color = "#00FF00"; d.style.fontSize = "36px"; document.getElementById('def').innerHTML = 'Click-Tap to view/select ' + personsnamejs + " 's Art"; document.getElementById('PersonImage').src = personpath; document.getElementById('paypal').innerHTML ="* Your name and email address will not be sold or traded."; document.getElementById('reason').innerHTML = "Art for your desktop/device"; }; </script> <script type='text/javascript'> function linkSound(picname,personname) { if(picname != 'default') { soundfile = picname.replace('w.bmp','.mp3'); var soundfilepath = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personname + '/Sound/' + soundfile; document.getElementById('Sound').src = soundfilepath; } }; </script> <script> function changePic(picname,personname) { if(picname != 'default') { var path = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personname + '/Graphicw/' + picname; var myimg = document.getElementById('myImage'); var newImage = new Image(); newImage.src = path; newImage.onerror = function() { alert('There was a problem loading the Image file! - Please try again'); myimg.style.height = ''; myimg.src = ''; } newImage.onload = function() { myimg.src = path; x = document.getElementById('Graphic_select').selectedIndex; var Priceofart = priceofartarray[x-1]; picname = picname.replace('w.bmp','.bmp'); document.getElementById('person').value = personname; document.getElementById('Cost').value = Priceofart; document.getElementById('pic').value = picname; var y = document.getElementById('Price'); y.style.color = '#00FF00'; y.style.fontSize ='36px'; document.getElementById('Price').innerHTML= 'Price of Art ( without a watermark )(USD): $' + Priceofart + ' including GST'; } } }; </script> <title>ECOVIB2D©</title> </head> <body onload='setvar();' style='background-color: #660000'> <script language=JavaScript> <!-- //Disable right mouse click Script //By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive //For full source code, visit http://www.dynamicdrive.com var message="Go to ECOVIB2D!-https://ecovib2d.blogspot.com.au"; /////////////////////////////////// function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") // --> </script> <table class='div' align='center' border='0'> <tbody> <tr> <td bgcolor='#660000'><img height='auto' src='ecovib2d1.jpg' width='auto' /></td> <td bgcolor='#660000'> <p align='center' id ='Title'>ECOVIB2D©</p> <br> <br> <div class='div' id='google_translate_element'></div><script type='text/javascript'> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); } </script><script type='text/javascript' src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script> </td> </tr> </tbody> </table> <br> <br> <table class='div' style="background-color: #660000" align='center' > <tbody> <tr> <td style="image-orientation: 90deg;" align="left"> <img id='PersonImage' height='250' width='250'> </td> <td> <p align="center" id="reason"></p> <div class="absolute"> <select name='Graphic_select' id='Graphic_select' onchange='changePic(this.value,personsnamejs);linkSound(this.value,personsnamejs);'> <option value ='default' id = 'def' style='height:30px;'></option> <br> <?php $pname = "AdrianTudini"; foreach(glob("/home/ecovibdc/public_html/ECOVIB2D/MYART/".$pname."/Graphicw/*w.bmp") as $files1){ $files1 = basename($files1); echo "<option value='{$files1}'>{$files1}</option>"; }; ?> </select> </div> <img id='myImage' src='ecovib2d1.jpg' height='250' width='250'> <p align='center' id='PlaySound'>Play the sound with my art in mind</p> <audio id='Sound' controls="controls"><source src="ecovib2d.mp3" type="audio/mpeg"><source src="ecovib2d.ogg" type="audio/ogg"></audio> <br> <br> </td> </tr> </table> </center> <center> <p id='Price'> </p></center> <center> <form id='form' action='' method="GET"/> <input type='hidden' id='person' name='Person'/> <input type='hidden' id='Cost' name='Price' /> <input type='hidden' id='pic' name='Graphic'/> <p align='center' id='freename'>Enter FirstName:</p> <p align='center'><input maxlength='50' name='Firstname' size='50' type='text' /></p> <p align='center' style='color:#00FF00;fontSize:40px'> Enter SurName:</p> <p align='center'><input maxlength='50' name='Surname' size='50' type='text' /></p> <p align='center' id='freeaddress'>Enter Email-Address:</p> <p align='center'><input id='e-address' maxlength='50' name='email' size='50' type='text' /></p> <input type='submit' id="Buy" value='Buy Now with PayPal'/> <br> <img src='Paypal.png'><img src="//www.mysecuressls.com/images/seals/crazy_secure_03.png" border="0"> </form> </center> <p align='center' id='paypal'></p> </body> </html> |
CharlesEF |
Feb 8 2018, 07:00 PM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
What are you having trouble with? Exactly what are you wanting to do? What, if any, errors do you get?
|
tudsy |
Feb 8 2018, 09:44 PM
Post
#3
|
Advanced Member Group: Members Posts: 246 Joined: 30-September 14 Member No.: 21,611 |
What are you having trouble with? Exactly what are you wanting to do? What, if any, errors do you get? Hi thanks for that I am getting no errors but it would be nice to have the user see a default image and hear a default sound every time they click-tap the default option of the select tab after they have selected another option. Thanks. |
CharlesEF |
Feb 9 2018, 05:14 AM
Post
#4
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Hi thanks for that I am getting no errors but it would be nice to have the user see a default image and hear a default sound every time they click-tap the default option of the select tab after they have selected another option. Thanks. Well, according to your code you prevent both picture and sound changes when the <select> value is 'default'. Your code is hard to read but that's what I see. |
tudsy |
Feb 27 2018, 07:22 AM
Post
#5
|
Advanced Member Group: Members Posts: 246 Joined: 30-September 14 Member No.: 21,611 |
Hi thanks for that I am getting no errors but it would be nice to have the user see a default image and hear a default sound every time they click-tap the default option of the select tab after they have selected another option. Thanks. Well, according to your code you prevent both picture and sound changes when the <select> value is 'default'. Your code is hard to read but that's what I see. Thanks for that. The problem is now solved. Thanks. |
tudsy |
Feb 27 2018, 10:24 AM
Post
#6
|
Advanced Member Group: Members Posts: 246 Joined: 30-September 14 Member No.: 21,611 |
Hi thanks for that I am getting no errors but it would be nice to have the user see a default image and hear a default sound every time they click-tap the default option of the select tab after they have selected another option. Thanks. Well, according to your code you prevent both picture and sound changes when the <select> value is 'default'. Your code is hard to read but that's what I see. Thanks for that. The problem is now solved. Thanks. Here is the modified code. The two functions had to be modified and the select tag was also modified. <script type='text/javascript'> function linkSound(picname,personname) { if(picname !== 'default') { y = document.getElementById('Graphic_select').selectedIndex; soundfile = picname.replace('.jpg','.mp3'); var soundfilepath = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personname + '/Sound/' + soundfile; var defsoundfilepath = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personname + '/Sound/ecovib2d.mp3'; if (y >0) { document.getElementById('Sound').src = soundfilepath; } if(y===0) { document.getElementById('Sound').src=defsoundfilepath; } } }; </script> <script> function changePic(picname,personname) { if(picname !== 'default') { var path = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personname + '/Graphic/' + picname; var defpath = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personname + '/Graphic/ecovib2d1.jpg'; var myimg = document.getElementById('myImage'); var newImage = new Image(); var x = document.getElementById('Graphic_select').selectedIndex; if(x === 0){ newImage.src = defpath;} if(x>0) { newImage.src = path;} newImage.onerror = function() { alert('There was a problem loading the Image file! - Please try again!'); myimg.style.height = ''; myimg.src = ''; } newImage.onload = function() { if(x === 0){ myimg.src = defpath; document.getElementById('Price').innerHTML=''; } if(x>0) { myimg.src = path; r=x-1; if(r=== -1){r=0;} var Priceofart = priceofartarray[r]; document.getElementById('person').value = personname; document.getElementById('Cost').value = Priceofart; document.getElementById('pic').value = picname; var y = document.getElementById('Price'); y.style.color = '#00FF00'; y.style.fontSize ='36px'; document.getElementById('Price').innerHTML= 'Price of Art (USD): $' + Priceofart + ' including GST'; } } } }; </script> Select tag: <div class="absolute"> <select id='Graphic_select' onchange='changePic(this.value,personsnamejs);linkSound(this.value,personsnamejs);'> <?php $pname1 ='Adrian Tudini'; echo "<option value = '' style='height:30px;'>Click or tap to view/select $pname1 s Art </option>"; $pname='AdrianTudini'; foreach(glob("/home/ecovibdc/public_html/ECOVIB2D/MYART/".$pname."/Graphic/*.jpg") as $files1){ $files1 = basename($files1); echo "<option value='{$files1}'>{$files1}</option>"; }; ?> </select> </div> |
Lo-Fi Version | Time is now: 4th May 2024 - 04:11 AM |