Oval pop-up

5 oktober, 2007

Kan du hjälpa mig med javascript? Du ser min påbörjade sida på web.comhem.se/consoler. I högerkolumn ligger en massa "nagelbilder". Jag skulle vilja ha en hover-effekt: om man för musen över nagelbilden, motsvarande stor bild ska poppa upp i den ovala spegeln. Då har jag 2 frågor.

1. Vilken javaspript ska jag använda?

2. Hur får jag bilden att hamna bakom gif-bilden och ska visas oval? (Jag kan tänka mig att z-index skulle fixa den här, men IE struntar i z-index)

[inlägget ändrat 2007-10-05 13:32:57 av IvanB]

5 oktober, 2007

För såna ovala bilder hade det varit bättre att göra det i Flash, särskilt när dess omgivning ser ut som den gör.

Hade du haft rektangulära bilder(spegeln) hade det varit lättare att lösa med javascript.

Det går säkert att lösa med javascript(oavsett spegel), menar inte att det är omöjligt,, men det är "lite" meck" med att få till allt med den omgivningen du har.

z-index används främst till absolut-positionerade objekt.

[inlägget ändrat 2007-10-05 14:24:28 av Micke_skane]

5 oktober, 2007

Det var synd. Jag har inte Flash och nu har jag inte tid och ork att lära mig så fort. Finns inget alternativ, helst gratis alternativ till Flash?

[inlägget ändrat 2007-10-05 14:26:23 av IvanB]

5 oktober, 2007

Man kan ladda ner programet gratis under en begränsad tid:

http://www.adobe.com/products/flash/

Annars kan man ju "ordna" programet på annat sätt

Men det är på ditt eget ansvar!

[inlägget ändrat 2007-10-05 14:31:20 av Micke_skane]

5 oktober, 2007

Använd absolut positionering så löser det sig.

[log]

<html>
<head>
<style type="text/css">
<!-- 
#top {
position:absolute;
top:0px;
left:100px;
z-index:100;
}
#bottom {
position:absolute;
top:0px;
left:100px;
z-index:10;
}

-->
</style>
</head>

<body>
<img id="top" alt="spegelram (147K)" src="spegelram.gif" height="890" width="485" />
<img id="bottom" src="3.jpg" height="890" width="485" />

</body>
</html>

[/log]

5 oktober, 2007

Men då kommer bilderna, som jag förmodar är i JPEG-format, att täcka över sprayflaskan eller vad det nu är.

Menar alltså själva bakgrunden på bildytan, även om själva bilden är oval.

Eller har du lyckats göra jpeg-bilderna genomskinliga, utan bakgrund?

[inlägget ändrat 2007-10-05 14:39:38 av Micke_skane]

5 oktober, 2007

Eller har du lyckats göra jpeg-bilderna genomskinliga?

Du får göra om spegeln till en gif och sätta transparens på spegelytan.

5 oktober, 2007

Aja, du menar tvärtom, bilden underst och väggen,spegeln, tillbehör ovanför.

Då går det ju. Är det fredag eftermiddag eller

Då kan jag ju tipsa om att slänga in bildnamnen i en array och sen anropa en funktion där du skickar in en parameter för vilken storbild som ska visa i spegeln.

Funktionen anropar du med onmouseover på thumbsbilderna.

Nu ska jag hämta barnen på fritids så en trevlig helg på Er!

[inlägget ändrat 2007-10-05 14:48:21 av Micke_skane]

5 oktober, 2007

Ang Flash: problemet är inte inskaffandet, utan min ork. En sak till att lära mig. Fast det gäller även med gratis-program.

Spegelen är gif och genomskinnlig. Den gröna bakgrunden är naturligtvis bara tillfällig som allt annat. Dit vill jag få in mina jpg bilder. Så går det eller inte, det sista var lite förvirrande. Konstigt, att man kan göra alla möjliga trolleri med css och javascript, men inte en så enkel sak som bilder bakom en oval förgrund.

Nu kom jag på en sak. Om jag använder png-bilder istället för jpg? Då kan jag fixa ovala bilder som kan poppa upp som om de skulle vara bakom spegeln Jag vet inte om IE klarar genomskinnlighet med png.

5 oktober, 2007

Konstigt, att man kan göra alla möjliga trolleri med css och javascript, men inte en så enkel sak som bilder bakom en oval förgrund.

Jag visade ju precis hur man gör.

5 oktober, 2007

Aha, tack så mycket, jag hann inte läsa, bara skriva. Det måste jag smälta lite, jag har aldrig gjort själv en javascript.

5 oktober, 2007

jag har aldrig gjort själv en javascript.

Ingen javascript i mitt exempel, bara css.

5 oktober, 2007

Ingen javascript, ändå poppar bilderna upp i spegeln om jag pekar på nagelbilderna? Då är det trolleri. Jag ska testa lite senare. Tack så mycket.

5 oktober, 2007

Ingen javascript, ändå poppar bilderna upp i spegeln om jag pekar på nagelbilderna?

Nä, mitt exempel visar bara hur du placerar en bild bakom en annan bild med z-index.

För dina tumnagelbilder måste du lägga till följande

onmouseover="Show('bildX.jpg');"
onmouseout="Hide();"

och lägga till funktionerna:

function Show(img) {
document.getElementById('Bottom').src=img;
}
function Hide() {
document.getElementById('Bottom').src="blank.jpg";

}

5 oktober, 2007

:thumbsup:Jag skulle vilja ösa på dig en massa poänger, men det går inte ens med javascript, bara en i taget. (Det går säkert att fixa det också med javascript, men det ska jag inte jobba med ;)Tack för hjälpen!

[inlägget ändrat 2007-10-06 09:20:28 av IvanB]

6 oktober, 2007

(För nytillkomna: det handlar om web.comhem.se/consoler)

Nu borde jag förstå, men jag är fortfarande helt okunnig i Javascript. Ska

jag lägga in den så här, i div right:

[log]

<div id="right" onmouseover="Show('bildX.jpg');"
onmouseout="Hide();">

<img alt="testanagel (0) (1K)" src="bilder/testanagel(0).jpg" height="60" width="80" />
<img alt="testanagel (1) (1K)" src="bilder/testanagel%20(1).jpg" height="51" width="60" />
<img alt="testanagel (2) (1K)" src="bilder/testanagel%20(2).jpg" height="51" width="60" /></div>

[/log]

och lägga till funktionerna

Var och hur?

Ska jag räkna upp namnen på stora popup-bilderna någonstans? Ska det vara ordagrant så här, med blank.jpg, eller ska blank.jpg ersätts med bildernas namn, tex "bilder/testaspegel(1).jpg" height.... osv? (de heter testaspegel med ett följdnummer i parentes) I så fall kan jag lägga de helt enkelt efter varandra?

6 oktober, 2007

Mellan <head> och </head> lägger du följande scriptblock:

function Show(img) {

document.getElementById('Bottom').src=img;

}

function Hide() {

document.getElementById('Bottom').src="blank.jpg";

}

</script>

Ge bilden som är bakom spegeln ett id:

Och thumbsbilderna blir följande:

...osv...

Nu ser du att du skickar med bildlänken till den stora bilden i onmouseover. Beroende på vilken thumbs du för musen över så skickas det med rätt bildlänk.

Vid onmouseout så sätts bilden blank.jpg som aktuell bild.

6 oktober, 2007

Jag har klantat till på något sätt ändå. Jag visar "resultatet" på web.comhem.se/consoler. Jag försökte bara med de 3 första.

6 oktober, 2007

Det var nog mer jag som missade på tangentbordet!

Ändra:

Till:

Testa igen!

Ligger bilderna i en mapp som heter bilder?

För det syns inga bilder på hemsidan.

Och är där ett hål i spegeln så bilden under kommer att synas?

[inlägget ändrat 2007-10-06 13:41:35 av Micke_skane]

6 oktober, 2007

Nu har jag rättat jacascriptet.

Ja, bilderna ligger i mappen bilder och jag var noga med namnet också, både på små och stora bilderna, fast bara de 3 första.

Ja, det finns hål i spegelbilden. Den gröna är bakgrundens färg.

Den vill inte ändå....

Edit Ursäkta, vänta lite, storbilderna har inte fått rätt namn...

EDIT igen. Nu ser ut så att allting är rätt, utom sidan på nätet.

[inlägget ändrat 2007-10-06 14:30:59 av IvanB]

6 oktober, 2007

Jag tänkte bara visa mappen bilder som ligger tillsammans med index.html, om du ser någonting som avviker.

[bild bifogad 2007-10-06 14:44:28 av IvanB]

[inlägget ändrat 2007-10-06 14:45:42 av IvanB]

6 oktober, 2007

Ser ut som att du har ett mellanslag innan () i filnamnen.

nagelbild (1).jpg

ska väl vara: nagelbild(1).jpg osv...

Vidare så ökade jag skärmupplösningen till max och då såg jag att bilden som ska finnas i spegeln ligger under hela spegelbilden/bakgrunden.

Där är något tokigt i css-koden!

Elementen är ju inte absolute-positionerade!

Det ska dem vara och ligga inom ett relativt-positionerad div.

Sen justerar du dem med left resp top.

Svårt att veta hur du tänkt dig det annars hade jag kunnat ordna det åt dig. Känns som om där är fler div:s än vad som behövs...

För du en yta med border som jag inte förstår och som heter sidfot men det ligger lite märkligt för det, tycker jag.

[inlägget ändrat 2007-10-06 16:49:35 av Micke_skane]

6 oktober, 2007

Jag var inte hemma nu. Det är mycket snällt av dig att du ordnar det här. Det blir mycket lärorikt för mig också.

Den här sidan ska vara den andra länken av de 4-5 sidor som ingår i en ganska enkel webplats. Just den här sidan ska vara en galleri, en samling av fotografier. Den här skulle bli en samling bilder, men eftersom bilderna är inte särskilt intressanta, vissa är ganska dåliga, men jag tänkte ordna så att jag visar bara en bild i taget. Om bilderna poppar upp i spegeln när musen rör sig ovanpå nagelbilderna, då själva bildvisningen blir så rolig att man inte behöver stirra särskilt länge på en bild, man känner lust att röra på musen och roa sig med händelserna först och främst. Att bilderna syns i en spegel, den passar bra ihop med den mannen som hemsidan handlar om. Det är hans spegel, helt enkelt. Alla konstigheter beror på att jag utgår ifrån en mall som spricker hela tiden. Mallen var en enkel sida med en huvudtitel, 3 kolumner och en sidfot.

Vänstra kolumnen: vanliga navigation-menyknappar med länkar till web-platsens andra sidor, det är inga konstigheter där.

Mittenkolumnen ska bestå endast av den stora gif-bilden med spegel, med enda anledningen att visa upp bilder en i taget som om de skulle synas i spegel. Fast det ska inte finnas någonting som speglas, vi ser bilder bara inne i spegel.

Högerkolumn: nagelbilderna för att kunna välja, vilken bild som visas i spegeln. Där skulle jag vilja ha hover-effekt, så att bilderna i spegeln ska lätt poppa upp och lika lätt försvinna.

Sidfoten är mindre viktig för innehållet, men jag skulle gärna ha den. Naturligtvis längst ner, där den låg, innan jag börade lägga in bilder i mallen.

Förresten, min adress: ibogardi@gmail.com

Tack så väldigt mycket, att du hjälper mig.

EDIT: Jag tog bort mellanslaget bildernas namn. Du upptäckte felet direkt! Fantastiskt. (Bilderna är bara tillfälliga, de hör inte ihop med de stora bilderna heller. Jag ska lägga in de riktiga bilderna, när strukturen funkar)

[inlägget ändrat 2007-10-06 22:09:14 av IvanB]

7 oktober, 2007

Du kan få ett exempel i kväll(finns dock redan en början på ett exempel i tråden, om du själv vill prova tidigare).

7 oktober, 2007

Tack, det käns tryggt. Jag ska försöka få ihop den under dagen, innan du kommer med facit.

Oval pop-up

Rekommendera Poster

IvanB

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

IvanB

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

IvanB

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

IvanB

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

IvanB

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

IvanB

Länk till kommentar

Dela på andra webbplatser

IvanB

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

IvanB

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

IvanB

Länk till kommentar

Dela på andra webbplatser

IvanB

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

IvanB

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

IvanB

Länk till kommentar

Dela på andra webbplatser

Arkiverat

Vem är online 0 Medlemmar, 0 anonym, 11 gäster (Visa hela listan)

Populära medlemmar