Hello friends,
How to create html pictures effects code? I want a blinking picture for my website html project to be submitted next week. Can you illustrate some coding technique or any video tutorials will do for me to get this done immediately.
Thanks and Regards,
Debra Carter.
How to create html pictures effects code?
Hi
You can blink the image in html by writing image src code in between <blink> </blink> tag, But this tag doesn’t work properly with some browser like Internet Explore etc.
For Ex: <blink> <img src = "C:UsersVishalDocuments386300.jpg" alt = "poetry" width = "300" height = "50" align = "right"> </blink> but it doesn't work with Internet Explore that why you have to use a java script code in your html code. I am giving you the small script. just copy it and paste in your html page.
Script:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
/*JavaScript*/
delay=100;
timer=window.setInterval("blinkImg()",1000);
function blinkImg()
{
f=document.getElementById("fire");
(a) f.style.display="block";
for(i=1;i<delay;i++) // creates delay between blinks
dummy=0;
(b) f.style.display="none";
}
/*CSS*/
#fire{
position:absolute;top:140px;left:100px;
display:none;
}
</script>
</head>
<body>
<img src="images/fire.png" id="fire" /><br>
</body>
</html>
This code works fine. I hope this will help you.
Answered By
mcbrel
0 points
N/A
#172186
How to create html pictures effects code?
Hi Debra Carter,
I don`t know the code for a blinking image. But this is the code for a slideshow image in HTML.
If you want to try, this is the code.
<html>
<head>
<script language="JavaScript">
<!–
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="image2.jpg"
var image3=new Image()
image3.src="image3.jpg"
//–>
</script>
</head>
<body>
<img src="image1.jpg" name="slide" width=150 height=150>
<script>
<!–
var step=1
function slideit(){
if (!document.images>
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
setTimeout ("slideit()",1500)
}
slideit()
//–>
</script>
</body>
</html>
NOTE: All image should be the same size.
Just copy the code then paste it on notepad. Don`t forget to change the BOLD one`s.
You can add more image, for next image(4th image) just add
var image4=new Image()
image4.src="image4.jpg"
then change 3 in (step<3) to the number of your image in your slideshow.
the last one, change 1500 in ("slideit()",1500) to amount of time you want to go to the next image.(in milliseconds 1500=1.5 secs.)
Hope this helps.
Good luck!
