Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Default image and sound

Posted by: tudsy Feb 8 2018, 08:39 AM

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&copy;</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&copy;</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>

Posted by: CharlesEF Feb 8 2018, 07:00 PM

What are you having trouble with? Exactly what are you wanting to do? What, if any, errors do you get?

Posted by: tudsy Feb 8 2018, 09:44 PM

QUOTE(CharlesEF @ Feb 9 2018, 09:30 AM) *

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.


Posted by: CharlesEF Feb 9 2018, 05:14 AM

QUOTE(tudsy @ Feb 8 2018, 08:44 PM) *

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.

Posted by: tudsy Feb 27 2018, 07:22 AM

QUOTE(CharlesEF @ Feb 9 2018, 07:44 PM) *

QUOTE(tudsy @ Feb 8 2018, 08:44 PM) *

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.

Posted by: tudsy Feb 27 2018, 10:24 AM

QUOTE(tudsy @ Feb 27 2018, 09:52 PM) *

QUOTE(CharlesEF @ Feb 9 2018, 07:44 PM) *

QUOTE(tudsy @ Feb 8 2018, 08:44 PM) *

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>








Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)