• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Image klickbar machen

H

Harald

Guest
Hallo, ich habe folgenden PageSlider in meine Seite integriert. Dieses CSS erzeugt 2 Pfeile (links, rechts) auf die man auch klicken kann um auf die nächste Page zu kommen. Ich möchte aber diese Pfeile durch ein Bild eines Pfeiles ersetzen. Das Bild habe ich schon. Wie kann ich dieses in das untere CSS einbinden?

/**
* fullPage 2.6.6
* https://github.com/alvarotrigo/fullPage.js
* MIT licensed
*
* Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
*/
html.fp-enabled,
.fp-enabled body {
margin: 0;
padding: 0;
overflow:hidden;

/*Avoid flicker on slides transitions for mobile phones #336 */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#superContainer {
height: 100%;
position: relative;

/* Touch detection for Windows 8 */
-ms-touch-action: none;

/* IE 11 on Windows Phone 8.1*/
touch-action: none;
}
.fp-section {
position: relative;
-webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
-moz-box-sizing: border-box; /* <=28 */
box-sizing: border-box;
}
.fp-slide {
float: left;
}
.fp-slide, .fp-slidesContainer {
height: 100%;
display: block;
}
.fp-slides {
z-index:1;
height: 100%;
overflow: hidden;
position: relative;
-webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-slidesContainer {
float: left;
position: relative;
}
.fp-controlArrow {
position: absolute;
z-index: 4;
top: 50%;
cursor: pointer;
width: 0;
height: 0;
border-style: solid;
margin-top: -38px;
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.fp-controlArrow.fp-prev {
left: 10px;
width: 0;
border-width: 20px 25px 20px 0;
border-color: transparent #000 transparent transparent;
}
.fp-controlArrow.fp-next {
right: 10px;
border-width: 20px 0 20px 25px;
border-color: transparent transparent transparent #000;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
#fp-nav {
position: fixed;
z-index: 100;
margin-top: -32px;
top: 50%;
opacity: 1;
-webkit-transform: translate3d(0,0,0);
}
#fp-nav.right {
right: 17px;
}
#fp-nav.left {
left: 17px;
}
.fp-slidesNav{
position: absolute;
z-index: 4;
left: 50%;
opacity: 1;
}
.fp-slidesNav.bottom {
bottom: 17px;
}
.fp-slidesNav.top {
top: 17px;
}
#fp-nav ul,
.fp-slidesNav ul {
margin: 0;
padding: 0;
}
#fp-nav ul li,
.fp-slidesNav ul li {
display: block;
width: 14px;
height: 13px;
margin: 7px;
position:relative;
}
.fp-slidesNav ul li {
display: inline-block;
}
#fp-nav ul li a,
.fp-slidesNav ul li a {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
text-decoration: none;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
height: 12px;
width: 12px;
margin: -6px 0 0 -6px;
border-radius: 100%;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
border-radius: 50%;
position: absolute;
z-index: 1;
height: 4px;
width: 4px;
border: 0;
background: #333;
left: 50%;
top: 50%;
margin: -2px 0 0 -2px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
width: 10px;
height: 10px;
margin: -5px 0px 0px -5px;
}
#fp-nav ul li .fp-tooltip {
position: absolute;
top: -2px;
color: #fff;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
display: block;
opacity: 0;
width: 0;
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
-webkit-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
width: auto;
opacity: 1;
}
#fp-nav ul li .fp-tooltip.right {
right: 20px;
}
#fp-nav ul li .fp-tooltip.left {
left: 20px;
}
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
height: auto !important;
}
 
Werbung:
Es ist sehr hilfreich, wenn man auch einen Link zur Seite postet, damit man sich das ansehen kann.
 
Hier ein Bild. Diese beiden Zeiger möchte ich durch img ersetzen.
Einen Link zur Webseite gibt es leider noch nicht.
 

Anhänge

  • zeiger.PNG
    zeiger.PNG
    2,7 KB · Aufrufe: 19
Zuletzt bearbeitet von einem Moderator:
Werbung:
Werbung:
Danke. Nur bei mir zeigt es die Bilder nicht an. Geht diese Möglichkeit nicht mit .png Dateien?
 
Ja hab ich schon probiert. Daher die Frage. Weil ich habe keine .svg Datei um zu testen ob die oben genannte Möglichkeit überhaut so funktioniert. Mit .png zeigt es mir gar nichts an.
 
Werbung:
Funktioniert leider noch immer nicht.
Code:
Code: 
.fp-controlArrow {
    border: none;
    width: auto;
    height:auto;
}
.fp-controlArrow.fp-prev:before {
    display:block;
    content: url(https://www.html.de/htmlde.png.pagespeed.ce.ghW9wsqeRa.png);
}
.fp-controlArrow.fp-next :before{
    display:block;
    content: url(https://www.html.de/htmlde.png.pagespeed.ce.ghW9wsqeRa.png);
}
 
Harald schrieb:
Funktioniert leider noch immer nicht.
Code:
Code: 
.fp-controlArrow {
    border: none;
    width: auto;
    height:auto;
}
.fp-controlArrow.fp-prev:before {
    display:block;
    content: url(https://www.html.de/htmlde.png.pagespeed.ce.ghW9wsqeRa.png);
}
.fp-controlArrow.fp-next :before{
    display:block;
    content: url(https://www.html.de/htmlde.png.pagespeed.ce.ghW9wsqeRa.png);
}
Zum Vergrößern anklicken....

Doch… (Siehe Screenshot)
Der Abstand bei ".fp-next :before" muss aber natürlich weg.
 

Anhänge

  • Bildschirmfoto 2015-09-01 um 16.59.55.png
    Bildschirmfoto 2015-09-01 um 16.59.55.png
    82 KB · Aufrufe: 15
Zuletzt bearbeitet:
Werbung:
Klappt bei mir trotzdem nicht :(
Könntest du dein Projekt zippen und raufladen?
 
Zeig lieber einen Link zu deinem aktuellen Stand, dann könnte man dir sagen was bei dir falsch läuft.
 
Werbung:
Harald schrieb:
Von der genannten library (fullPage.css) gibt es keine example3.css. Lad dir mal das Projekt von der offiziellen Seite. Die Datei heißt im oben genannten Fall einfach nur anders. Nach Dateinamen kannst du da nicht gehen. Bei mir heißt das .css File jquery.fullPage.css und beinhaltet genau den selben code.

Code: 
/**
* fullPage 2.6.6
* https://github.com/alvarotrigo/fullPage.js
* MIT licensed
*
* Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
*/
html.fp-enabled,
.fp-enabled body {
    margin: 0;
    padding: 0;
    overflow:hidden;

    /*Avoid flicker on slides transitions for mobile phones #336 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#superContainer {
    height: 100%;
    position: relative;

    /* Touch detection for Windows 8 */
    -ms-touch-action: none;

    /* IE 11 on Windows Phone 8.1*/
    touch-action: none;
}
.fp-section {
    position: relative;
    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box; /* <=28 */
    box-sizing: border-box;
}
.fp-slide {
    float: left;
}
.fp-slide, .fp-slidesContainer {
    height: 100%;
    display: block;
}
.fp-slides {
    z-index:1;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
    transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    padding-top: 0%;
    width: 100%;
    height: 100%;
}
.fp-slidesContainer {
    float: left;
    position: relative;
}
.fp-controlArrow {
    border: none;
    width: auto;
    height:auto;
}
.fp-controlArrow.fp-prev:before {
    display:block;
    content: url(https://www.html.de/htmlde.png.pagespeed.ce.ghW9wsqeRa.png);
}
.fp-controlArrow.fp-next:before{
    display:block;
    content: url(https://www.html.de/htmlde.png.pagespeed.ce.ghW9wsqeRa.png);
}
.fp-scrollable {
    overflow: scroll;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}
#fp-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
#fp-nav.right {
    right: 17px;
}
#fp-nav.left {
    left: 17px;
}
.fp-slidesNav{
    position: absolute;
    z-index: 4;
    left: 50%;
    opacity: 1;
}
.fp-slidesNav.bottom {
    bottom: 17px;
}
.fp-slidesNav.top {
    top: 17px;
}
#fp-nav ul,
.fp-slidesNav ul {
  margin: 0;
  padding: 0;
}
#fp-nav ul li,
.fp-slidesNav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}
.fp-slidesNav ul li {
    display: inline-block;
}
#fp-nav ul li a,
.fp-slidesNav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
    height: 12px;
    width: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #333;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
    width: 10px;
    height: 10px;
    margin: -5px 0px 0px -5px;
}
#fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
    -webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    width: auto;
    opacity: 1;
}
#fp-nav ul li .fp-tooltip.right {
    right: 20px;
}
#fp-nav ul li .fp-tooltip.left {
    left: 20px;
}
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
    height: auto !important;
}

und mit den Standardpfeilen (den weißen) geht es doch mit den Bildern nicht.
Zum Vergrößern anklicken....

Mein Code oben war eine Ergänzung zu den bestehenden Klassen, kein Ersatz.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben