3 Replies - 542 Views - Last Post: 21 July 2014 - 03:25 AM

#1 jacub cox  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 18-July 14

show and hide gif images when mouse click it html tag.

Posted 18 July 2014 - 07:22 AM

hello sir,
my question is first,how to make show and hide gif images when mouse click it any html tag like
div,navigation bar,button,
...etc.when mouse click any type of
button tag
then image should appear on that
button
not inside any
div or section tag
which have took in program.i have try many times not understand that it.please explain through program.


Is This A Good Question/Topic? 0
  • +

Replies To: show and hide gif images when mouse click it html tag.

#2 jacub cox  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 18-July 14

Re: show and hide gif images when mouse click it html tag.

Posted 18 July 2014 - 07:32 AM

hello sir,
my question is first,how to make show and hide gif images when mouse click it any html tag like
div,navigation bar,button,
...etc.when mouse click any type of
button tag
then image should appear on that
button
not inside any
div or section tag
which have took in program.i have try many times not understand that it.please explain through program.

<html>
<head>
<title>::show and hide::</title>
</head>
<body>
<div id="myimageDiv" style="display:none;">
<img src='../image/fire-effect.gif'>
<br />
</div>

<button onclick="showHide()" id="myBtn" >click me</button>

<script type="text/javascript">

function showHide(){
//create an object reference to the div containing images
var oImageDiv=document.getElementById("myimageDiv");
//set display to inline if currently none, otherwise to none
oImageDiv.style.display=(oImageDiv.style.display=='none')?'inline':'none';
}
</script>

</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#3 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 125
  • View blog
  • Posts: 531
  • Joined: 15-March 14

Re: show and hide gif images when mouse click it html tag.

Posted 18 July 2014 - 08:35 AM

To put an image in a button you need to use the style attribute background-image and point to the url of the image.
myBtn.style.backgroundImage = 'url("imageRelativeLocation/imageName.gif")'

to hide the image just set backgroundImage to none
myBtm.style.backgroundImage = "none";


If you prefer you can create two styles for each element and then change the class of each element to suit the required visual.
<style>
imageShow {background-image: url("myImage.gif");}
imageNone {background-image: none;}
</style>
<input id="myButton" class='imageNone'></input>

<script>
myButton.onclick = function(){     // add click event handler 
    if(this.className === "imageNone"){
         this.className = "imageShow";
    }else{
         this.className = "imageNone";
    }          
}
</script>


When you change the element class the DOM will also play any animation/transitions associated with the style.
Was This Post Helpful? 0
  • +
  • -

#4 jacub cox  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 18-July 14

Re: show and hide gif images when mouse click it html tag.

Posted 21 July 2014 - 03:25 AM

hello sir;thank you so much your reply.but i want to say that when mouse pointer click any particular area then produce any gif images at that time and hide.i explain you below some images. i want to create it in javascript program.above two program behavior is different below images.i want to do give more special effect on button , navigation bar etc...when mousedown it and mouseout it.please help me,and you can understand by images what i want?

Attached image(s)

  • Attached Image
  • Attached Image
  • Attached Image

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1