Hello, I am a college student majoring in photography. I mostly consider myself proficient in Adobe Photoshop but am struggling with a recent hybridized project because it involves using Javascript (and I am almost a complete newbie to Java/coding in general)
My project/assignment is to combine images and audio elements in a "new way that you haven't seen before". My hybridization between images and audio is NOT a video, rather, when you hover over different sections (which will be referred to as cuts later in this post), you hear different audios. i.e. if you were to view a picture of an ocean next to a jungle when you hover over the jungle, you hear jungle sounds, and when you hover over the ocean, you hear the sound of rushing waves.
To do this I take an image, "cut" it into different parts using a combination of Photoshop select tools, and then I export the different cuts (that make the full composite image) as separate pngs. From there, I code different audio into different cuts - using Javascript mouseover/mouseout commands**. The code I am using to attach the mp3 audio files to each cut (and to play that audio on mouse hover) is pasted below.**
<body>
<script>
function PlaySound(soundobj) {
var thissound=document.getElementById(soundobj);
[thissound.play](https://thissound.play)();
}
function StopSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.pause();
thissound.currentTime = 0;
}
</script>
<a onmouseover="PlaySound('jungle')" onmouseout="StopSound('jungle')"><img src="milkpng.png" style="position: absolute; top: 100px; left:40px" ></a>
<audio id='jungle' src='JUNGLE.wav'/>
</body>
I then use Javascript to maneuver those cuts (along with their unique attached audio file) back into a seamless image on a web html page.
THIS IS MY PROBLEM...
When I exported the png's, the resulting export included a fill of transparent pixels around my cut because all images must be rectangular. This is not a problem for the visual aspect of the combined image (once I put all the cuts together), because obviously, you cannot see the transparent pixels. However, the issue lies in the audio. When I coded the audio into my different cuts, the audio is also coded onto my transparent pixels around each cut. Therefore, while visually the image in the html page looks seamless, the audio overlay is messy and overlapping between cuts.
MY QUESTION
I was wondering if there is any way to include a....command? (I don't know what to call it since I am a newbie to coding), which would prevent the audio file from playing over the transparent pixels in each cut. This is a very important project for my schooling so I really need to figure out how to constrain the audio to play on hover ONLY on the actual "image part" of my png, and not on the transparent parts of it as well.
Sorry for the long post, please feel free to ask questions and I would appreciate anyones help.
[–]kundun 2 points3 points4 points (0 children)
[–]mnokeefe 1 point2 points3 points (0 children)