The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

how to make slideshow using html?

4 posters

Go down

Solved how to make slideshow using html?

Post by emokiller23 December 20th 2010, 6:28 am

can some one teach me how to make slideshow using html

LIKE THIS>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

the "pick your theme" thing on the left side, i want to put like that in my forum but a little bigger than that


Last edited by emokiller23 on December 21st 2010, 3:17 am; edited 1 time in total
avatar
emokiller23
New Member

Posts : 23
Reputation : 0
Language : tagalog

Back to top Go down

Solved Re: how to make slideshow using html?

Post by emokiller23 December 20th 2010, 8:51 am

bump
avatar
emokiller23
New Member

Posts : 23
Reputation : 0
Language : tagalog

Back to top Go down

Solved Re: how to make slideshow using html?

Post by Sanket December 20th 2010, 11:41 am

May I remind you that double/triple posting isn't tolerated unless separated by 24 hours (Use the edit button) Wink
Sanket
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

Back to top Go down

Solved Re: how to make slideshow using html?

Post by Cool-processor December 20th 2010, 6:48 pm

Impossible with only html.Its css,html,javascript.

Code:

<style type="css">
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 135px}

.picshow_main { position: relative; width: 180px; height: 135px}

.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 180px; height: 135px}

.picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 100px;}

.picshow_change img {width:15px; height: 15px}

.picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px;  -display: inline}

a.axx { border-color: #555}

a.axx:hover {border-color: #000}

a.axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4}

a.axx:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0}

a.bxx { border-color: #000}

a.bxx:hover {border-color: #000}

img{

border:0px}


</style>

<SCRIPT language=javascript>

 var counts = 3;

 img1 = new Image();

 img1.src = 'http://hitskin.com/themes/13/27/62/thumb.png';

 img2 = new Image();

 img2.src = 'http://hitskin.com/themes/12/62/62/thumb.jpg';

 img3 = new Image();

 img3.src = 'http://hitskin.com/themes/13/82/61/thumb.png';

 

 var smallImg = new Array();

 smallImg[0] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton1.gif';

 smallImg[1] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton2.gif';

 smallImg[2] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton3.gif';

 

 url1 = 'http://en.hitskin.com/search-a-skin/black-gold-132762.htm';

 url2 = 'http://en.hitskin.com/search-a-skin/360-elite-126262.htm';

 url3 = 'http://en.hitskin.com/search-a-skin/ipvista-138261.htm';

 

 alt1 = new Image();

 alt1.alt = 'Black Gold';

 alt2 = new Image();

 alt2.alt = '360 Elite';

 alt3 = new Image();

 alt3.alt = 'IP Vista';

 var nn = 1;

 var key = 0;

 function change_img() {

  if (key == 0) {

  key = 1;

  } else if (document.all) {

  document.getElementById("pic").filters[0].Apply();

  document.getElementById("pic").filters[0].Play(duration = 2);

  }

  eval('document.getElementById("pic").src=img' + nn + '.src');

  eval('document.getElementById("url_theme").href=url' + nn);

  eval('document.getElementById("pic").alt=alt' + nn + '.alt');

  if (nn == 1) {

  document.getElementById("url_theme").target = "_blank";

  document.getElementById("url_theme").style.cursor = "pointer";

  } else {

  document.getElementById("url_theme").target = "_blank"

  document.getElementById("url_theme").style.cursor = "pointer"

  }

 

  for ( var i = 1; i <= counts; i++) {

  document.getElementById("xxjdjj" + i).className = 'axx';

  }

  document.getElementById("xxjdjj" + nn).className = 'bxx';

  nn++;

  if (nn > counts) {

  nn = 1;

  }

  tt = setTimeout('change_img()', 7000);

 }

 function changeimg(n) {

  nn = n;

  window.clearInterval(tt);

  change_img();

 }

 function ImageShow() {

  document.write('<div class="picshow_main">');

  document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');

  document.write('<div class="picshow_change">');

  for ( var i = 0; i < counts; i++) {

  document.write('<a href="javascript:changeimg(' + (i + 1)

    + ');" id="xxjdjj' + (i + 1)

    + '" class="axx" target="_self"><img src="' + smallImg[i]

    + '"></a>');

  }

  document.write('</div></div>');

  change_img();

 }

</SCRIPT>

<SCRIPT language="javascript" type="text/javascript">

 ImageShow();

</SCRIPT>
Cool-processor
Cool-processor
Forumember

Male Posts : 724
Reputation : -55
Language : HTML | CSS/3 | JQuery
Location : To my own coding world

http://www.creative-labz.com

Back to top Go down

Solved Re: how to make slideshow using html?

Post by emokiller23 December 21st 2010, 3:14 am

thank you ,thank you,thank you so much !!!! merry christmas
avatar
emokiller23
New Member

Posts : 23
Reputation : 0
Language : tagalog

Back to top Go down

Solved Re: how to make slideshow using html?

Post by RoNo December 21st 2010, 3:31 am

RoNo
RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum