Mouseover - Wants image to pop up with mouseover/mouseout functions

Question

OK..

I have this site: http://stephaniie.com/_testlab/beta1/

{ Full html code: http://pastebin.com/u4HpxcB2 }

If you scroll down , on the right , there is Knight next to a Tower..

If you move your mouse from his right side.. an larger image of the Knight pop up.
And If you move the mouse closer to him an animation starts and he starts "talking"

This is made by some pretty easy coding.

->

For the KNIGHT-IMAGE to appear this CSS and Javascript is used:

Original Source: http://clba.nl/sitepoint/img-hover-demo-js1.htm

<style>
    #img2{
        position: absolute;
        top: 1400px;
        left: 50px;
        display: none;
     }
     #img1:hover + #img2 {display:block}
</style>

  <script>
  var img1 = document.getElementById("sol,
      img2 = document.getElementById("img2");

  img1.onmouseover = function(){
    img2.style.display = "block";
  }

  img1.onmouseout = function(){
    img2.style.display = "none";
  }
</script>

For the music to start playing a PlaySound/StopSound Javascript is used.

Original Source: Javascript play sound on hover. stop and reset on hoveroff

   <script>
    function PlaySound(soundobj) {
        var thissound=document.getElementById(soundobj);
        thissound.play();
    }
    function StopSound(soundobj) {
        var thissound=document.getElementById(soundobj);
        thissound.pause();
        thissound.currentTime = 0;
    }
    </script>

Question: How can I combine these two functions when I hover the Knight?

For HTML on the website I use "< map >" and "< area >" to make an Image map.

Code is:

<map name="map12" id="img_id12">
    <area class="youtube" coords="1497,52,1588,128" shape="rect" href="http://www.youtube.com/embed/GPbUA6dCR8k" style="outline:none;"
    onmouseover="if(document.images) document.getElementById('img_id12').src= 'assets/images/text/day/12.gif';" 
    onmouseout="if(document.images) document.getElementById('img_id12').src= 'assets/images/no-text/day/12.gif';"  />

    <area class="youtube" coords="3878,24,3957,96" shape="rect" href="https://www.youtube.com/embed/skV-q5KjrUA" style="outline:none;"
    onmouseover="if(document.images) document.getElementById('img_id12').src= 'assets/images/text/day/12solaire-ani.gif'; PlaySound('solaire'); "
    onmouseout="if(document.images) document.getElementById('img_id12').src= 'assets/images/no-text/day/12.gif'; StopSound('solaire'); PlaySound('solaire-stop');"  />
    <area id="sol" coords="3890,23,3970,100" shape="rect" style="outline:none;" />
</map>

The Only thing I want is too add a image appear function to my <"area"> code. So,

<img id="img2" src="solaire.gif" alt="" style="display: none;">

becomes this when "mouseover function" is activated.

<img id="img2" src="solaire.gif" alt="" style="display: block;">

Comment: As you can see in the code Above and on the website I'm able to use the image-hover and play/stopsound but not at the same time. Is there a way to use both script at the same time? If you wonder what the "onmouseover="if(document.images) document.getElementById('img_id12').src= 'assets/images/text/day/12solaire-ani.gif';" does. Its for changing the background to another one using an ID.

<img src="assets/images/no-text/day/12.gif" usemap="#map12" id="img_id12" class="first" />

I tried to add this "image appear/hide" script to "mouseover" in the map area code. Like this.

<area id="sol" class="youtube" ...
    onmouseover="if(document.images) document.getElementById('img_id12').src= 'assets/images/text/day/12solaire-ani.gif'; PlaySound('solaire'); "
</area

This works.. however the PlaySound/StopSound doesn't work anymore. However the Colorbox and changing image still works too. So the issue is adding the appear/hide image function and still have the PlaySound/StopSound function working .

Edit and more Information: Im also using two Javascript tools called Colorbox and Responsive Image Map. * Colorbox is a a jQuery lightbox script. Source: http://www.jacklmoore.com/colorbox/ * Reponsive Image Map allows image maps to be resized with screen-size. Source: http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

The code to use them on Index page is this.

<script>
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
$(document).ready(function(){
    //Examples of how to assign the Colorbox event to elements
    $(".youtube").colorbox({iframe:true, innerWidth:1024, innerHeight:576});
});
/script>

Full code for Responsive Image Map script and Colorbox is found here.

Responsive Image Map script: - Link -> http://pastebin.com/699T5kLY
Colorbox: - Link -> http://pastebin.com/Jj4SQEhu - Link -> http://pastebin.com/bErhvPFA

Have you tried something like this? ` img1.onmouseover = function(){ img2.style.display = "block"; PlaySound(); }` — rkeet, Mar 07 '17 at 15:14
Can you try the code again, but also add the following to the `PlaySound()` function: `console.log('I should now here sound:', soundobj);`. In you browsers devTools you "should" be seeing the message when the `.onmouseover` event is triggered. — rkeet, Mar 07 '17 at 15:23
Just noticed, you also have a syntax error in your JS: `var img1 = document.getElementById("sol,` <-- This line should end with `")`, before the comma. — rkeet, Mar 07 '17 at 15:26

score 0 · Accepted Answer · edited May 23 '17 at 12:34

First of all, you seem to have a syntax error in the first line here and you could call the functions straight from within the .onmouseover / .onmouseout event triggers.

<script>
    var img1 = document.getElementById("sol"), //Fix syntax error
        img2 = document.getElementById("img2");

    img1.onmouseover = function(){
        img2.style.display = "block";
        PlaySound(); // Add call to function PlaySound()
    }

    img1.onmouseout = function(){
        img2.style.display = "none";
        StopSound(); // Add call to function StopSound()
    }
</script>

Next, you seem to try to change a src attribute of an <img> element and calling the Start-/StopSound() functions at the same time. Whilest this might work, it makes for messy code. Seeing as how you have tagged jQuery in the question, I'm assuming you have it included in your project, so try the following (replaces the above):

$('#sol').mouseenter(function() {
    $(this).css('display', 'block');
    $(this).attr('src', 'assets/images/text/day/12solaire-ani.gif');
    PlaySound('solaire');
});
$('#sol').mouseleave(function() {
    $(this).css('display', 'none');
    $(this).attr('src', 'assets/images/no-text/day/12.gif');
    StopSound('solaire');
    PlaySound('solaire-stop');
});

Below based on our comments back 'n' forth below this answer

Straight copy from given site in Question a var img1 = document.getElementById("sol"),

    img2 = document.getElementById("img2");

img1.onmouseover = function(){
    img2.style.display = "block"; if(document.images) document.getElementById('img_id12').src= 'assets/images/text/day/12solaire-ani.gif'; PlaySound('solaire');
}

img1.onmouseout = function(){
    img2.style.display = "none"; if(document.images) document.getElementById('img_id12').src= 'assets/images/no-text/day/12.gif';

}

$('#sol').mouseenter(function() {
    $(this).css('display', 'block');
    $(this).attr('src', 'assets/images/text/day/12solaire-ani.gif');
    PlaySound('solaire');
});
$('#sol').mouseleave(function() {
    $(this).css('display', 'none');
    $(this).attr('src', 'assets/images/no-text/day/12.gif');
    StopSound('solaire');
    PlaySound('solaire-stop');
});

Change it to the below to be a bit more efficient/DRY. Replace the entire <script> ... </script> contents with the below ;)

var elementIds = [
    'sol',
    'img2'
];

elementIds.forEach(function(id) {
    var $element = $('#' + id);

    $element.mouseenter(function() {
        $(this).css('display', 'block');
        $(this).attr('src', 'assets/images/text/day/12solaire-ani.gif');
        PlaySound('solaire');
    });

    $element.mouseleave(function() {
        $(this).css('display', 'none');
        $(this).attr('src', 'assets/images/no-text/day/12.gif');
        StopSound('solaire');
        PlaySound('solaire-stop');
    });
});

Please note however that this is not perfect. You could try to expand on this code further by using a multidimensional object. In the data you could then have data such as which image URL to use when displaying and which when hiding, same with which music to play/stop when hiding/displaying.

An example object to back that up is:

var exampleObj = {
    sol: {
        show: {
            img: 'assets/images/text/day/12solaire-ani.gif',
            sound: 'solaire'
        },
        hide: {
            img: 'assets/images/no-text/day/12.gif',
            sound: 'solaire-stop'
        }
    },
    img2: {...},
    img3: {...}
};

Example implementation using the example object above (you'll have to finish off its contents yourself and/or modify functionality, is just to give you an idea of how to do it):

Object.keys(exampleObj).forEach(function (key, value) {
    var $element = $('#' + key);

    $element.mouseenter(function() {
        $(this).css('display', 'block');
        $(this).attr('src', value.show.img);
        PlaySound(value.show.sound);
    });

    $element.mouseleave(function() {
        $(this).css('display', 'none');
        $(this).attr('src', value.hide.img);
        StopSound(); // Modify the StopSound() function to stop any sound that's playing, regardless of what
        PlaySound(value.hide.sound);
    });
});

Second NOTE ;) All the code above is untested :| sry bout that

little disclaimer, not quite sure that I've used the correct attribute modifications at the correct time, same with function calls. Though it might give you a handle to work with. — rkeet, Mar 07 '17 at 15:44
Wow. That worked perfectly. :) I just have one little issue. When i move the mouse away.. the image doesn't change back to the original. The playsound still works though. — , Mar 07 '17 at 15:53
You might have to modify the source I've given in the `.mouseleave()` trigger to whichever URL it is that applies ;-) — rkeet, Mar 07 '17 at 15:54
Edited: nvm found it. The code at the top of my answer is still on [your website](http://stephaniie.com/_testlab/beta1/) though. This might interfere as you now have 2 sets of calls to different functions. You should delete the first bit of my answer from your code. — rkeet, Mar 07 '17 at 15:56
Well.. i came into alittle .. ehm. Double-sided road. Code: http://pastebin.com/VYzQ9574 Now it does work perfectly so THANK U SO MUCH AGAIN! <3<3 But it seems the code is alittle messy.. any tip how to now use same functions twice etc? =) — , Mar 07 '17 at 15:58
Give me a minute, I'll update my answer with a straight copy/paste from your site and then a modification of the whole ` — rkeet, Mar 07 '17 at 16:00
Cool =). Ty again. I'm thinking of one more thing. Making the image that appear/hide - have responsive resize. So it changes size like all other images. Dno if that is possible. .. Im trying this : #img2{ position: absolute; top: 1400px; left: 50px; display: none; width:auto; height: auto; } — , Mar 07 '17 at 16:07
Sorry, styling isn't my strong suit ;-) For that I would suggest you ask another question. Btw, that site of yours is pretty cool ;-) — rkeet, Mar 07 '17 at 16:14
Last edit, time to go home, added example usage of an Object to maybe help you out further. It's untested though (as with all other code thus far), so modify as needed ;) — rkeet, Mar 07 '17 at 16:20
Wow. Im speechless. Such a great feature. I will look into this. Seems like alot easier if I can learn how to use objects. Thank so much again! <3 Hey: i forget to say.. you can also press the Sun for a little "variety" =) — , Mar 07 '17 at 16:47

Mouseover - Wants image to pop up with mouseover/mouseout functions

1 Answers1

Straight copy from given site in Question a var img1 = document.getElementById("sol"),