Bild Info Slider

[Basthinio]

hey, ich habe auf dieser Internetseite http://www.gamestop.de/ etwas entdeckt und zwar das bei Mouseover sich Bilder verschieben und sich Text neben dem Bild auftut. Das finde ich ist sehr gut und Platzsparend umgesetzt, daher möchte ich so etwas auch für meine Seite haben. Weiß aber nicht wie ich das umsetzten kann. Kann mir bitte jemand helfen oder einen Link zu einem Tutorial schicken? Habe echt nicht genügend Ahnung um so was umzusetzen :durchweg: MFG Sebastian

[Guillermo]

Hi Sebastian,

das was du suchst nennt sich "Akkordeon" eine kleine Beispielliste gibt es hier: http://mannheim-design.de/javasript-accordions/.
Eine vorgefertigte, leicht anpassbare Version findest du hier: http://www.zundel-webdesign.de/ein-einf ... fur-jquery

Wenn du noch Fragen hast helfen wir dir gerne

Viele Grüße,
Guillermo

[Basthinio]

Vielen dank auch für die schnelle Antwort. Das ist genau das was ich gesucht habe :-D
Habe es jetzt so weit verändert wie ich es wollte nur noch eine Sache bekomme ich nicht hin. Ich möchte das man nicht klicken bracht sonder es einfach per Mouseover funktioniert.
Und ist es vielleicht möglich das bei betreten der Seite schon ein Part geöffnet ist?

Code: Alles auswählen

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >
// SeViR Simple Horizontal Accordion @2007
// http://letmehaveblog.blogspot.com
jQuery.fn.extend({
haccordion: function(params){
var jQ = jQuery;
var params = jQ.extend({
speed: 600,
headerclass: "header",
contentclass: "content",
contentwidth: 200
},params);
return this.each(function(){
jQ("."+params.headerclass,this).click(function(){
var p = jQ(this).parent()[0];
if (p.opened != "undefined"){
jQ(p.opened).next("div."+params.contentclass).animate({
width: "0px"
},params.speed);
}
p.opened = this;
jQ(this).next("div."+params.contentclass).animate({
width: params.contentwidth + "px"
}, params.speed);
});
});
}
});
</script>
<script type="text/javascript" >
$(function(){
$(".haccordion").haccordion();
});
</script>

<style type="text/css">
.haccordion .content {
float: left;
height:176px;
}
p {
margin:0px;
padding:0px;
}
.header {
background: #eee;
color: #222;
cursor: pointer;
border:0px solid #eee;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
margin-right:0px;
font-weight:bold;
float:left;
height:176px;
overflow:hidden;
}
.content {
width: 0px;
overflow: hidden;
}
.content_01 {
border:0px solid #000;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
margin-right:0px;
height:176px;
padding:10px;
background:transparent;
color:#000000;
}
</style>


<div class="haccordion">
<div class="header"><img src="http://img4.fotos-hochladen.net/uploads/unbenannt3g52i0tb8da.gif" width="106" alt="Bild" /></div>
<div class="content">
<div class="content_01">
<p>TEXT</p>
</p>
</div>
</div>
<div class="header"><img src="http://img4.fotos-hochladen.net/uploads/unbenannt3nr3g7bt9we.gif" width="106" alt="Bild" /></div>
<div class="content">
<div class="content_01">
<p>TEXT</p>
</div>
</div>
<div class="header"><img src="http://img4.fotos-hochladen.net/uploads/unbenannt3eu8lk3tbp0.gif" width="106" alt="Bild" /></div>
<div class="content">
<div class="content_01">
<p>TEXT</p>
</div>
</div>
</div>

[Guillermo]

Hi Sebastian,

ich hab den Quelltext jetzt nur überflogen, bin aber der Meinung dass man die Zeile

Code: Alles auswählen

...
jQ("."+params.headerclass,this).click(function(){
...


in

Code: Alles auswählen

...
jQ("."+params.headerclass,this).mouseover(function(){
...


umschreiben muss. (Vergleiche jQuery Dokumentation: Events)

Viele Grüße,
Guillermo