Moje stránky s oknem

[Ajdam]

Mám stránky a chtěl bych tam mýt okno jako tad :http://www.wrestlingweb.cz/
(myslím to okno s tima obrázkama)

Neznáte na to nějaký program ? Díky

[pukasinek]

Myslíš to jak tam jsou ty zprávy?Když najedeš na to okno malý tak se ti změní do toho většího a po kliknutí na odkaz se dostaneš na zprávu nebo jaký okno myslíš přesně?

edit: Myslím že by nebylo od věci nahodit odkaz tvýho webu.

[Ajdam]

MYSLÍM TO OKNO S TIMA OBRÁZKAMA JAK MŮŽEŠ KLIKNOUT A ON SE TAM ZMĚNI TEN OBRÁZĚK A JE TAM I TEXT

[pukasinek]

Buď prosimtě hodnej a nahoď sem odkaz tvýho webu,jinak to okno pokud se nemýlím se musí udělat pomocí nějakého skriptu,netuším co umíš nebo neumíš,ale klasickým HTML by možná taky šel?Netuším,nicméně ta stránka na kterou jsi odkázal má asi systém na zakázku,případně si je mohli udělat i sami,ale není to jednoduché,ač,možná že tady někdo z fóra ví jak na to

[mmmartin]

Ajdam: 1) Odkazy se do fóra vkládají v podobě, která umožňuje jejich otevření pouhým kliknutím na odkaz. Toho dosáhneš použitím tlačítka URL
2) Pokud po někom chci nějakou radu, nezačnu na něj křičet hned po jeho první doplňující otázce.
3) Pro otázky ohledně programování webu je tu vytvořená zvláštní sekce. Pokud svůj dotaz vložíš do sekce Vše ostatní > Vše ostatní, může se stát, že budeš zbytečně dlouho čekat na odpověď.

Téma přesunuto.

[Tomina]

Ty měnící se obrázky bývají realizovány nejčastěji pomocí nějakého skriptu (někdy i ve flashi). Kód k tomuto příkladu je zde:

jQuery plugin:

Abbc3 Spoiler Show

/*
* Easy Slider 1.5 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-slid ... or-sliding
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/

/*
* markup example for $("#slider").easySlider();
*
* <div id="slider">
* <ul>
* <li><img src="images/01.jpg" alt="" /></li>
* <li><img src="images/02.jpg" alt="" /></li>
* <li><img src="images/03.jpg" alt="" /></li>
* <li><img src="images/04.jpg" alt="" /></li>
* <li><img src="images/05.jpg" alt="" /></li>
* </ul>
* </div>
*
*/

(function($) {

$.fn.easySlider = function(options){

// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: false,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false, // to make the slides scroll vertically change this to true
speed: 800, // to make the scoll transition faster decrease this number
auto: true,
pause: 3000, // to make each slide visible for a longer duration increase this number
continuous: true // to end at the last slide change this to false
};

var options = $.extend(defaults, options);

this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = $("li", obj).width();
var h = $("li", obj).height();
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);
if(!options.vertical) $("li", obj).css('float','left');

if(options.controlsShow){
var html = options.controlsBefore;
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
html += options.controlsAfter;
$(obj).after(html);
};

$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});

function animate(dir,clicked){
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
break;
};

var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
speed
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
speed
);
};

if(!options.continuous && options.controlsFade){
if(t==ts){
$("a","#"+options.nextId).hide();
$("a","#"+options.lastId).hide();
} else {
$("a","#"+options.nextId).show();
$("a","#"+options.lastId).show();
};
if(t==0){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
} else {
$("a","#"+options.prevId).show();
$("a","#"+options.firstId).show();
};
};

if(clicked) clearTimeout(timeout);
if(options.auto && dir=="next" && !clicked){;
timeout = setTimeout(function(){
animate("next",false);
},diff*options.speed+options.pause);
};

};
// init
var timeout;
if(options.auto){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};

if(!options.continuous && options.controlsFade){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
};

});

};

})(jQuery);

Velice podrobný návod, jak tvořit jednotlivé akce, je zde. Jsou tam i kódy..většinou se jedná o pluginy jQuery..