The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Default image and sound
tudsy
post Feb 8 2018, 08:39 AM
Post #1


Advanced Member
****

Group: Members
Posts: 138
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&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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Feb 8 2018, 07:00 PM
Post #2


This is My Life
*******

Group: Members
Posts: 1,491
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Feb 8 2018, 09:44 PM
Post #3


Advanced Member
****

Group: Members
Posts: 138
Joined: 30-September 14
Member No.: 21,611



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Feb 9 2018, 05:14 AM
Post #4


This is My Life
*******

Group: Members
Posts: 1,491
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Feb 27 2018, 07:22 AM
Post #5


Advanced Member
****

Group: Members
Posts: 138
Joined: 30-September 14
Member No.: 21,611



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Feb 27 2018, 10:24 AM
Post #6


Advanced Member
****

Group: Members
Posts: 138
Joined: 30-September 14
Member No.: 21,611



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>







User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st June 2018 - 09:37 AM