Suche im Forum:
Suchen


Autor Nachricht
Beitrag08.01.2012 um 10:59 (UTC)    
Titel: "nervöser" Mousover

hallo,

ich hatte kürzlich schon mal ne Frage zum mousover,leider ist der beitrag schon geschlossen.

http://www.homepage-baukasten.de/forum/viewtopic.php?t=135021&highlight=

Der Mouseover funktioniert,nur habe ich jetzt das problem das die seite sehr nervös wirkt.

http://www.vita-imago.de/test-2.htm

gibt es eine Möglichkeit einer zeitverzögerten öffnung der bilder? also das man zum beispiel die maus erst 1 sekunde auf dem vorschaubild halten muss bevor es sich öffnet?
mfg Frank
______________
Beitrag09.01.2012 um 13:49 (UTC)    
Titel:

Hallo,

du kannst per Javascript mit dem onmouseover event einen Timeout setzen.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag09.01.2012 um 23:02 (UTC)    
Titel:

timeout....ist das im forum irgendwo beschrieben wie das geht?mein mousover ist ja eigentlich n Hoover.
mfg Frank
______________
Beitrag11.01.2012 um 00:07 (UTC)    
Titel:

Mouseover und hover läuft auf das gleiche raus. Mir fällt aber gerade noch eine bessere Methode ein. Mit CSS 3 gibt es die transition Eigenschaft, damit kannst du bewirken, dass sich dein Bild langsam aufbaut.
Das Problem daran ist, dass der IE diese Eigenschaft erst ab Version 10 kennt bzw. kennen wird.

Deinen Bildern weist du als erstes eine Klasse zu:
Zitat:
<img src="URL des Bildes" alt="Alternativ text" class="transition">


In deinem CSS Code, definierst du dann für die Bilder die transition Eigenschaft. Um Cross Browser kompatibel zu bleiben nutzt du auch die Browser spezifischen Präfixe aus:

Zitat:
img.transition {
-moz-transition:width linear 2s, height linear 2s;
-webkit-transition:width linear 2s, height linear 2s;
-khtml-transition:width linear 2s, height linear 2s;
-o-transition:width linear 2s, height linear 2s;
-ms-transition:width linear 2s, height linear 2s;
transition:width linear 2s, height linear 2s;
width:XXpx;
height:XXpx;
}

img.transition:hover {
width:XXpx;
height:XXpx;
}

Breite normal
Höhe normal
Breite beim Hover
Höhe beim Hover
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 11.01.2012, 01:13, insgesamt 2-mal bearbeitet
Beitrag11.01.2012 um 10:31 (UTC)    
Titel:

danke für deine bemühungen aber es funktioniert bei mir leider nicht.
IE ist klar weil ich den 10er nicht habe aber auch beim mozilla gehts nicht.
wäre auch schlecht für meine seitenbesucher weil ich nicht davon ausgehen kann das alle aktuelle browser benutzen.

wie geht das mit dem timeout?würd ich gern probieren.
mfg frank
______________
Beitrag11.01.2012 um 13:43 (UTC)    
Titel:

Wenn es im FF nicht geht, hast du etwas falsch gemacht. Wink

Als erste schreibst du dir eine Funktion, die den gewünschten hovereffekt erzeugt. Willst du Höhe und Breite ändern, dann musst du das in dieser Funktion machen.
In deinem imagetag nutzt du dann die DOM-Methode setTimeout und rufst obige Funktion mit der gewünschten verzögerung auf:

Zitat:
<img src="URL zum Bild" alt="Alternativtext" onmouseover="setTimeout(nameDerFunktion, 2000);" onmouseoutr="setTimeout(nameDerFunktion, 2000);">

Referenz der Funktion (Name der Funktion ohne() ).
Verzögerung in millisekunden, hier also 2 Sekunden

Auch hier kannst du es soProgrammieren, dass sich das Bild langsam aufbaut. Dazu setzt du den Timeout innerhalb der Funktion und vergrößerst das Bild mit jedem Aufruf um einige Pixel.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag15.01.2012 um 18:27 (UTC)    
Titel:

ich bekomms einfach nicht hin..bin zu doof für sowas...
______________
Beitrag15.01.2012 um 23:22 (UTC)    
Titel:

atlantis-photography hat Folgendes geschrieben:
ich bekomms einfach nicht hin..bin zu doof für sowas...

Very Happy

Woran scheitert es?
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag16.01.2012 um 18:30 (UTC)    
Titel:

naja,was soll ich sagen...mein wissen ist recht "überschaubar"...
genau genommen arbeite ich immer nach dem "Versuch und Irrtum Prinzip"was bisher eigentlich immer nach ein paar Bastelstunden irgendwie zum erfolg führte.
nur hierbei steh ich eben total auf dem schlauch..

also..versuchen wirs mal zu entwirren..?

in meinem "Text über dem Design" steht

img.a1 { height:150px; width:100px; }
img.a1:hover { height:auto; width:auto; }

img.a2 { height:100px; width:150px; }
img.a2:hover { height:auto; width:auto; }




und auf der Seite selbst zum beispiel


<img class="a1" alt="" width="100" height="150" src="http://img.webme.com/pic/a/atlantis-photography/dsc_3705.jpg" />


wenn ich deinen script


<img src="URL zum Bild" alt="Alternativtext" onmouseover="setTimeout(nameDerFunktion, 2000);" onmouseoutr="setTimeout(nameDerFunktion, 2000);">


richtig interpretiere müßte ich das was ich im "Text über dem Design" zu einer Funktion zusammenfassen und benennen?..und anstelle meines (((<img class="a1" alt="" width="100" height="150" src="http://img.webme.com/pic/a/atlantis-photography/dsc_3705.jpg" /> ))) einfügen


mfg frank
______________


Zuletzt bearbeitet von atlantis-photography am 16.01.2012, 19:32, insgesamt einmal bearbeitet
Beitrag16.01.2012 um 23:46 (UTC)    
Titel:

Mein script ist gar kein script, sondern lediglich ein Prototyp, wie du es machen kannst.

Ich sehe schon, das wird leider nichts.
Wenn ich Zeit habe, mache ich dir das. Ich verschiebe aber erstmal nach ich suche, vielleicht findet sich noch jemand anderes.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag17.01.2012 um 18:52 (UTC)    
Titel:

na toll.....support gibt auf..spitze
______________
Beitrag17.01.2012 um 23:41 (UTC)    
Titel:

Naja, als aufgeben würde ich das nicht bezeichnen, eher als realistisch sein. Dir fehlen einfach gewisse Grundlagen um das umsetzen zu können. Hier mal meine Lösung, die du noch für dich anpassen musst (Ich glaube dann verstehst du, was ich mit realistisch sein meine). Ich habe es etwas Objekt orientierter gemacht:

Zitat:
<script type="text/javascript">
var steps = 25;
var minWidth = XX;
var minHeight = XX;

var i, temp, temp2;

temp = document.getElementsByTagName('img');

for(i = 0; i < temp.length; i++) {
if(temp[i].className && temp[i].className == 'o4nimagesizechanger'){
temp2 = new Image();
temp2.src = temp[i].src;
temp[i].acWidth = minWidth;
temp[i].maxWidth = temp2.width;
temp[i].acHeight = minHeight;
temp[i].maxHeight = temp2.height;
temp[i].timeOut = null;
temp[i].makeItBigger = function () {
var obj = this;

if(this.timeOut)
window.clearTimeout(this.timeOut);

((this.acWidth + steps) < this.maxWidth) ? this.acWidth += steps : this.acWidth += (this.maxWidth - this.acWidth);

this.style.width = this.acWidth + 'px';

((this.acHeight + steps) < this.maxHeight) ? this.acHeight += steps : this.acHeight += (this.maxHeight - this.acHeight);

this.style.height = this.acHeight + 'px';

if((this.acHeight < this.maxHeight) || (this.acWidth < this.maxWidth))
this.timeOut = window.setTimeout(function(){obj.makeItBigger();}, 200);
};
temp[i].makeItSmaller = function () {
var obj = this;

if(this.timeOut)
window.clearTimeout(this.timeOut);

((this.acWidth - steps) > minWidth) ? this.acWidth -= steps : this.acWidth -= (this.acWidth - minWidth);

this.style.width = this.acWidth + 'px';

((this.acHeight - steps) > minHeight) ? this.acHeight -= steps : this.acHeight -= (this.acHeight - minHeight);

this.style.height = this.acHeight + 'px';

if((this.acHeight > minHeight) || (this.acWidth > minWidth))
this.timeOut = window.setTimeout(function(){obj.makeItSmaller();}, 200);
};
temp[i].onmouseover = temp[i].makeItBigger;
temp[i].onmouseout = temp[i].makeItSmaller;
}
}
</script>

Schrittweite in Pixel (alle 200 ms wird das Bild um diese Anzahl an Pixel vergrößert hier also um 25 Pixel)
Breite des kleinen Bildes
Höhe des kleinen Bildes

Die Bilder müssen zu der Klasse "o4nimagesizechanger" gehören.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 18.01.2012, 01:30, insgesamt 6-mal bearbeitet
Beitrag18.01.2012 um 20:03 (UTC)    
Titel:

danke dafür!deshalb din ich eben fotodesigner und du webdesigner..!aber ich bemühe mich und es funktioniert sogar.für hoch-und querformat muss ich das sicher getrennt machen,oder?
mfg Frank
______________
Beitrag18.01.2012 um 23:04 (UTC)    
Titel:

atlantis-photography hat Folgendes geschrieben:
aber ich bemühe mich

Das habe ich gemerkt, sonst hätte ich es dir nicht gemacht. Very Happy

atlantis-photography hat Folgendes geschrieben:
für hoch-und querformat muss ich das sicher getrennt machen,oder?

Kannst du mir erklären, wie du das meinst? Die Breite und Höhe des Bildes wird automatisch ausgelesen.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag19.01.2012 um 16:36 (UTC)    
Titel:

ja,sdas ist richtig.sorry,ich hab mich etwas unglücklich ausgedrückt.

was ich meine sind die "vorschaubilder".
ausgegangen wird jeweils von der minimalen höhe und der minimalen breite.was dazu führt, das nach aktivieren des bildes dieses auf das min. Maß zurückgeht und die vorschaubilder dann quadratisch sind.iche denke das liegt daran,das ein querformatiges vorschaubild eine min.höhe von 100px hat und ein hochformatiges eine min.breite von 100px.
aber ich denke damit kann ich leben.habe die vorschaubilder jetzt generell auf 100x100 festgelegt.
die Bildauswahl ist aber immer noch schwierig...
mfg
______________


Zuletzt bearbeitet von atlantis-photography am 21.01.2012, 13:23, insgesamt 2-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de