Beiträge von Gamecard

Gamecard · 18. Juni 2018

Ok es Funktioniert src von neuen jquery hat geholfen

Code

<input type="button" data-bild="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg" class="but" id="go1" value="Bild1" href="www.google.de" >

Aber wenn ich ein Link einfüge und auf dem Button Bild eins 'Clicke passiert nichts ?

Code

$('.but').hover(function(){
    j=$(this).data('bild');
    $('#inbild').attr('src',j)

});

v=1;
$('.prev').click(function(){
     r=$('#go'+v).data('bild');
     $('#inbild').attr('src',r)
     v++;
     if(v>=5){
         v=5;
     }
});
$('.next').click(function(){
    r=$('#go'+v).data('bild');
    $('#inbild').attr('src',r)
    v--;
    if(v<=1){
        v=1;
    }
});

Alles anzeigen

Oder muss ich den Lick in Js einfügen ?

Code

Ich habe die Click }).click(function(){
    alert('Hier könnte man den Link "'+j+'" verlinken  ,oder das Bild und den Button direkt verlinken');

Gamecard · 14. Juni 2018

Zitat von basti1012

Ok https://codepen.io/basti1012/pen/pKeEeE

Vielen Vielen Dank

Ich habe eine frage....leider funktioniert das nicht auf meine Webseite....obwohl alles richtig eingebunden ist....bzw die Navigation/hover funktioniert nicht.

Kann es sein das es Probleme macht mit andern js script macht ?

Gamecard · 13. Juni 2018

@basti1012

Ja so soll es sein so ungefähr ...die Button sollten natürlich außerhalb der Bild Fläche sein ...Aber Ansonst ist Perfekt ...

ist das aber gewollt das am Anfang kein Standard Bild geladen wird ? Hier bei sollte irgend ein Bild geladen werden.

Js das muss ich noch wirklich an schauen.

@Arne Drews

Sieht gut aus

Leider ist zum Slider keine doku vorhanden

Gamecard · 11. Juni 2018

Zitat von basti1012

Die bilder sollen in ein button? Wie gross soll der button den sein ?

Oder meinst du das du da zb 4 buttons hast und wenn man dann über den button fährt das das bild dann unter den button angezeigt wird?

Der Button wird so groß wie die Beschreibungs des Bild sein.

Ja Genau so soll es sein.....aber der Silder soll trotzdem erhalten bleiben wenn man nicht über den Button hovert.

Zitat von Sailor

Neee... das ist leider alles andere als verständlich!

Was willst du denn erreichen? Soll nur das Bild erscheinen, wenn du über den Button hoverst? Warum soll der Button dann 'Click me' heißen?

Wo soll das Bild erscheinen?

Was bedeutet... 'der Button soll auch Links enthalten'? Buttons können im übrigen nur einen Link enthalten - und wenn du die originären HTML Buttons meinst, dann brauchst du zur Funktion 'Link enthalten' auch noch ein <form..><form> Element.

Für das Erscheinen eines Bildes beim 'hover' brauchst du kein JavaScript, dafür reicht HTML und CSS.

Also bitte... beschreibe was du willst etwas genauer und zeige uns das, was du bisher an Code produziert hast! Vielleicht kann man daran erkennen, was du vor hast.

Alles anzeigen

Das "Click me" war einfach eine Beschreibung, das hat doch einiges an Verwirrung erwirkt tut mir leid, aber hinter dem Button soll es auf Links verweisen.

Ja versuche ich :O....fällt mir leider nicht so leicht

Zitat von basti1012

Ja Sailor da hast du recht .Mit der erklärung komme ich nicht weit ,höchstens so vieleicht ,was ich daraus verstehe

https://codepen.io/basti1012/pen/Kegywp

Ja so ungefähr nur der Silder sollte erhalten bleiben.

Gamecard · 11. Juni 2018

Hallo erstmal Vielen Vielen Dank :).....

Ich meine die Bilder sollten in einem Button(der Button sollen auch Links enthalten) Praktisch zugewiesen werden.

Das heißt das Button "Click Me" soll zu Bild 1 und das Button "Click Me 2" zu Bild 2 und so weiter...und die Bilder sollen sich gesteuert werden über mouse over mit dem Button, das heißt wenn ich über das Button "Click Me 2" darüber mit der Maus Fahre soll sich Bild 2 Angezeigt werden.

Ich hoffe ich könnte das euch verständlich schreiben.

Gamecard · 7. Juni 2018

Hallo ich möchte mein Silder auch mit mouse over steuern können, das heißt wenn man auf dem Button drüber fliegt das auch das Bild geändert wird zum Button ....aber wie stelle ich mir das an....

Mein Code sieht der zeit so aus

CSS

<div class="container">
    
    <input type="radio" id="i1" name="images" checked />
    <input type="radio" id="i2" name="images" />
    <input type="radio" id="i3" name="images" />
    <input type="radio" id="i4" name="images" />
    <input type="radio" id="i5" name="images" />    
    
    <div class="slide_img" id="one">            
            
            <img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
            
                <label class="prev" for="i5"><span>&#x2039;</span></label>
                <label class="next" for="i2"><span>&#x203a;</span></label>    
        
    </div>
    
    <div class="slide_img" id="two">
        
            <img src="https://preview.ibb.co/e5OShF/cropped_800_480_111290.jpg " >
            
                <label class="prev" for="i1"><span>&#x2039;</span></label>
                <label class="next" for="i3"><span>&#x203a;</span></label>
        
    </div>
            
    <div class="slide_img" id="three">
            <img src="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg">    
            
                <label class="prev" for="i2"><span>&#x2039;</span></label>
                <label class="next" for="i4"><span>&#x203a;</span></label>
    </div>

    <div class="slide_img" id="four">
            <img src="http://wallpaperswide.com/download/big_hero_6_baymax-wallpaper-1152x720.jpg">    
            
                <label class="prev" for="i3"><span>&#x2039;</span></label>
                <label class="next" for="i5"><span>&#x203a;</span></label>
    </div>

    <div class="slide_img" id="five">
            <img src="http://www.wallpapereast.com/static/images/toys-wallpaper-hd-16339-17046-hd-wallpapers.jpg">    
            
                <label class="prev" for="i4"><span>&#x2039;</span></label>
                <label class="next" for="i1"><span>&#x203a;</span></label>

    </div>

    <div id="nav_slide">
        <label for="i1" class="dots" id="dot1"></label>
        <label for="i2" class="dots" id="dot2"></label>
        <label for="i3" class="dots" id="dot3"></label>
        <label for="i4" class="dots" id="dot4"></label>
        <label for="i5" class="dots" id="dot5"></label>
    </div>
    

    
</div>




<button id=i2" class="button">Click Me</button> 





<style>
@import url('https://fonts.googleapis.com/css?family=Just+Another+Hand');

body, html{
        width: 100%;
        height: 100%;    
        margin: 0;
        font-family: 'Just Another Hand', cursive;
        overflow-X: hidden;/* optional */
    }

#i1, #i2, #i3, #i4, #i5{ display: none;}

.container{
        margin: 0 auto;
        margin-top: 20px;
        position: relative;
        width: 70%;
        height: 0;
        padding-bottom: 38%;
      user-select: none;
        background-color: #1c1c1c;
        border: solid 10px #616161;
        border-radius:10px ; 
    }

    .container .slide_img{
        position: absolute;
        width: 100%;;
        height: 100%;
    }
    .container .slide_img img{
        width: inherit;
        height: inherit;
    }

     .prev, .next{
        width: 12%;
        height: inherit;
        position: absolute;
        top:0; 
        background-color: rgba(88, 88, 88,.2);
        color:rgba(244, 244, 244,.9);
        z-index: 99;
        transition: .45s;
        cursor: pointer;
        text-align: center;
    }

    .next{right:0;}
    .prev{left:0;}

    label span{
        position: absolute;
        font-size: 100pt;
        top: 50%;
         transform: translateY(-50%);
    }

    .prev:hover, .next:hover{
        transition: .3s;
        background-color: rgba(88, 88, 89,.8);
        color: #ffffff; 
    }

.container #nav_slide{
    width: 100%;
    bottom: 12%;
    height: 11px;
    position: absolute;
    text-align: center;
    z-index: 99;
    cursor: default;
}

#nav_slide .dots{
    top: -5px;
    width: 18px;
    height: 18px;
    margin: 0 4px;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);
    transition: .4s;
}

#nav_slide .dots:hover {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.9);
    transition: .25s
}

.slide_img{z-index: -1;}

    #i1:checked ~ #one  ,
    #i2:checked ~ #two  ,
    #i3:checked ~ #three,
    #i4:checked ~ #four ,
    #i5:checked ~ #five 
    {z-index: 9; animation: scroll 1s ease-in-out;}

    #i1:checked  ~  #nav_slide #dot1,
    #i2:checked  ~  #nav_slide #dot2,
    #i3:checked  ~  #nav_slide #dot3,
    #i4:checked  ~  #nav_slide #dot4,
    #i5:checked  ~  #nav_slide #dot5
    { background-color: rgba(255,255,255,.9);}

@keyframes scroll{
    0%{    opacity:.4;}
    100%{opacity:1;}
}        

/* .yt{
    margin: 0 auto;
    margin-top: 50px;
    position: relative;
    width: 150px;
    height:50px;
    border: outset #2c2c2c 4px;
    border-radius: 10px;
    text-align: center;
    font-size: 30pt;
    transition: .5s;
}

.yt a{
    text-decoration: none;
    color: #4c4c4c;
    transition: .5s;
}

.yt:hover{
    background: #4c4c4c;
    transition: .3s;
}

.yt:hover a{
    color: #fff;
    transition: .3s;
}
 */
@media screen and (max-width: 685px){
    .container{
        border: none;
        width: 100%;
        height: 0;
        padding-bottom: 55%; 
    }    
    
    label span { font-size: 50pt; }
    
    .prev, .next{
        width: 15%;
    }    
    #nav_slide .dots{
        width: 12px;
        height: 12px;
    }
}
@media screen  and(min-width: 970px){
    .me{ display: none;}
}

.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.button:after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

</style>

Alles anzeigen

Beiträge von Gamecard

mit Mosue over button Bilder silder steuern

mit Mosue over button Bilder silder steuern

mit Mosue over button Bilder silder steuern

mit Mosue over button Bilder silder steuern

mit Mosue over button Bilder silder steuern

mit Mosue over button Bilder silder steuern