The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

how to make slideshow using html?

View previous topic View next topic Go down

Solved how to make slideshow using html?

Post by emokiller23 on 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

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 on December 20th 2010, 8:51 am

bump

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 on 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
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: how to make slideshow using html?

Post by Cool-processor on 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://illiweb.com/fa/optimisation_fdf/common/bouton1.gif';

 smallImg[1] = 'http://illiweb.com/fa/optimisation_fdf/common/bouton2.gif';

 smallImg[2] = 'http://illiweb.com/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
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 on December 21st 2010, 3:14 am

thank you ,thank you,thank you so much !!!! merry christmas

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 on December 21st 2010, 3:31 am


RoNo
Active Poster

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

http://bf2mercenaries.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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