Växlande bilder

Tråden skapades och har fått 19 svar. Det senaste inlägget skrevs .
1
  • Oregistrerad
  • 2006-08-03 10:49

Jag har en div på startsidan innehållandes en bild. Jag vill att denna bild ska växla mellan tre identiska i storleken men olika bilder. Detta ska göras helt automatiskt. Finns det något bra script eller liknande att använda eller måste jag ta till Flash?

  • Oregistrerad
  • 2006-08-03 11:54

kör php.. det är snyggast i min mening... Detta förutsätter förstås att din webb-server har php-möjligheter.

Det du vill göra är att ha alla tre (eller hur många bilder du vill) i samma mapp. filnamnen skall vara i sekvens. dvs 1.jpg, 2.jpg och 3.jpg.

sen i img-taggen har du bara en kort php-snutt för att göra slumphanteringen.

<img src="/images/<?php echo rand(1, 3); ?>.jpg">

så enkelt är det.. ettan symboliserar lägsta accepterade värde och trean symboliserar högsta accepterade värde. Om du har 5 bilder ska det alltså stå "echo rand(1, 5);".

Lycka till!

  • Oregistrerad
  • 2006-08-03 13:00

Utmärkt, jag ska prova det.

Edit: Det slog mig nu, hur ställer du in intervallet?

  • Medlem
  • Mölndal
  • 2006-08-03 13:43

Helbros lösning innebär ju att varje gång sidan laddas blir det en ny bild.

Örnen, av din fråga att döma undrar jag om det är detta du menar, eller syftar du på en bild som hela tiden växlar när man har sidan uppe? Isf går det att lösa med JavaScript.

Att det sen är irriterande med saker som rör sig och blinkar och skrämmer bort besökare är förstås en annan femma man får ta ställning till.

  • Oregistrerad
  • 2006-08-03 13:50

Jag förstår hur den fungerar nu och tror liksom du att ovanstående php-lösning är det bästa och inte för avskräckande. Tack ännu en gång för tips!

  • Oregistrerad
  • 2006-08-03 15:27

Om jag nu skulle vilja ta det ett steg längre. Att användaren triggar ett bildbyte. Går detta också att lösa med liknande php-kod?

Ursprungligen av the_eagle:

Om jag nu skulle vilja ta det ett steg längre. Att användaren triggar ett bildbyte. Går detta också att lösa med liknande php-kod?

Nackdelen med php är att hela sidan måste laddas om för att den ska ändras. Det är nog dynamisk HTML du vill använda, kommer bara inte ihåg hur man gör.

  • Oregistrerad
  • 2006-08-06 10:01

Kul att det hjälpte lite.

Om du vill att användaren ska trigga ett ombyte av bild skulle jag använda javascript. Det finns då olika idéer. Antingen kan man köra onMouseOver-, eller onMouseClick-funktioner. Dessa innebär att när du antingen drar musen över eller klickar på bilden så byts den ut. Du kan också lösa detta lätt med att ha en länk som heter typ "Nästa bild", eller ännu bättre kanske är en b bild, och när man klickar på den så bytes bilden i fråga ut mot nästa i raden (eller slumpmässigt om du vill, då kan du använda php-koden igen).

Skriv här exakt hur du vill att lösningen ska se ut så kan jag tipsa dig vidare. Just nu vet jag inte alls hur du vill ha det. Det finns som sagt tusentals sätt att lösa problemet att användaren ska trigga bytet.

God lycka!

  • Oregistrerad
  • 2006-08-07 10:30
Ursprungligen av helbro:

Kul att det hjälpte lite.

Om du vill att användaren ska trigga ett ombyte av bild skulle jag använda javascript. Det finns då olika idéer. Antingen kan man köra onMouseOver-, eller onMouseClick-funktioner. Dessa innebär att när du antingen drar musen över eller klickar på bilden så byts den ut. Du kan också lösa detta lätt med att ha en länk som heter typ "Nästa bild", eller ännu bättre kanske är en b bild, och när man klickar på den så bytes bilden i fråga ut mot nästa i raden (eller slumpmässigt om du vill, då kan du använda php-koden igen).

Skriv här exakt hur du vill att lösningen ska se ut så kan jag tipsa dig vidare. Just nu vet jag inte alls hur du vill ha det. Det finns som sagt tusentals sätt att lösa problemet att användaren ska trigga bytet.

God lycka!

Jag har en logga längst upp till vänster på sidan som jag vill ska växla mellan ett antal färgvariationer utav loggan. Det som ska trigga bildväxlingen är en bild (imagemap) utav dom anställda som är placerad mitt på sidan. När jag för musen över en viss anställd på företaget ska logga växlas till den rätta färgkombinationen för den anställda i fråga. Detta för att göra hemsidan lite mer levande.

  • Medlem
  • Mölndal
  • 2006-08-07 12:49

Med den förklaringen kom ju saken i ett helt annat läge! (Inte helt lätt att utläsa ur ditt första inlägg att det var så här du menade! )

Den finns en mängd lösningar på detta. Det vanligaste är att man gör en imagemap och sedan med JavaScript byter ut bakgrundsbilden när man för muspekaren över. När du pekar på Calle byts bilden ut mot en där Calle lyfts fram t ex.

Vill man vara lite mer kreativ/nyskapande kan man lösa det hela enbart med CSS. Då slipper man stänga ute folk som inte kan/får/vill köra JavaScript. Ett mycket bra exempel på hur detta kan gå till finns här:
http://www.cssplay.co.uk/menu/imap.html
Titta på andra exemplet, det borde påminna en del om det du vill göra. Då har man istället en bakgrundsbild, och sen en bild med varje person utklippt från resten, som helt enkelt visas ovanpå.

  • Oregistrerad
  • 2006-08-07 13:06
Ursprungligen av memark:

Med den förklaringen kom ju saken i ett helt annat läge! (Inte helt lätt att utläsa ur ditt första inlägg att det var så här du menade! )

Den finns en mängd lösningar på detta. Det vanligaste är att man gör en imagemap och sedan med JavaScript byter ut bakgrundsbilden när man för muspekaren över. När du pekar på Calle byts bilden ut mot en där Calle lyfts fram t ex.

Vill man vara lite mer kreativ/nyskapande kan man lösa det hela enbart med CSS. Då slipper man stänga ute folk som inte kan/får/vill köra JavaScript. Ett mycket bra exempel på hur detta kan gå till finns här:
http://www.cssplay.co.uk/menu/imap.html
Titta på andra exemplet, det borde påminna en del om det du vill göra. Då har man istället en bakgrundsbild, och sen en bild med varje person utklippt från resten, som helt enkelt visas ovanpå.

Tack för tipset! Jag ska kolla närmare på det. Men det är alltså inte min imagemap som ska ändras utan loggan längst upp till vänster.

Mitt första inlägg gällde en annan sak jag behövde få löst. Det fungerar jättebra.

  • Oregistrerad
  • 2006-08-07 14:08

Jag har nu använt mig av följande JavaScript:

<SCRIPT LANGUAGE=JavaScript>
intImage = 2;
function swapImage() {
switch (intImage) {
 case 1:
   logga.src = "img/loggo_gul.gif"
   intImage = 2
   return(false);
case 2:
   logga.src = "img/loggo_bla.gif"
   intImage = 1
   return(false);
 }
}
</SCRIPT>


Och för att trigga loggo-bytet har jag använt denna kodsträng i min imagemap:

onmouseover="swapImage();" 
onmouseout="swapImage(); " 
onclick="swapImage();" href="#per"

Detta innebär att när jag för musen över Per så växlar bilden och när jag för musen utanför Per så nollställs den, även ifall jag klickar på Per.

Så långt allting gott, men nu har jag två ytterligare personer som också har varsin logga. Hur ska jag lösa detta? Genom att skapa ytterligare två funktioner eller skapa fler case i den befintliga funktionen? Kan jag skicka med vilket case som gäller beroende på var jag klickar?

  • Oregistrerad
  • 2006-08-07 16:06

Efter lite tester inser jag nu att denna funktion inte fungerar överhuvudtaget i Firefox/Camino och beter sig väldigt underligt i Explorer. Dessutom skapar ramar för kordinaterna i Imagemapen i Explorer. Kan man ta bort dessa ramar med CSS? Och hur får jag funktionen att vara vattensäker även i Firefox/Camino?

  • Oregistrerad
  • 2006-08-14 12:58

Ingen som har en bra lösning på mitt lilla problem?

  • Medlem
  • Mölndal
  • 2006-08-15 12:53

Lägg upp en testsida nånstans så ska jag kika lite på den.

  • Oregistrerad
  • 2006-08-15 13:07
  • Oregistrerad
  • 2006-08-22 05:33

jag vet inte riktigt vad det är som inte funkar nu.. jag tycker det funkar bra.. jag kör firefox.

om du tittar på sidan i iexporer kommer den bör den inte visa kanter rund image-mappen. gör den det fortfarande? eller löste du det på ngt bra sätt? jag kan ha en viss aning om vad som ska göras om du inte löst det än.

.niclas

  • Oregistrerad
  • 2006-08-22 09:43

Jag fick det att fungera i Firefox till slut genom att lägga till document innan logga.src.

Om du har ett förslag på hur jag ska få bort kanterna i IE tar jag gärna emot det. Antar att man borde kunna lösa det med CSS. Det är endast IE för Mac som det ser tokigt ut så det är inte hela världen om det inte går och lösa.

  • Medlem
  • Mölndal
  • 2006-08-22 23:07

IMHO kan man numera skita i IE/Mac. Den browsern är så olidligt kass att det helt enkelt inte är värt besväret. Sidan fungerar ju ändå, det ser bara lite annorlunda ut.

  • Oregistrerad
  • 2006-08-25 19:24

first things first.. ursackta for att jag inte kan skriva med aao.. jag ar pa ett amerikanskt tangentbord.

Vidare kan jag meddela att IE/MAC inte ens utvecklas langre.. Microsoft har lagt ned IE/mac HELT! Jag fick leta ratt lange for att hitta IE/mac nar jag behovde det for utvecklingssyfte i ett projekt jag hade forut.

http://www.deathball.net/notpron/levelone.htm

Titta pa den har sidan och se om de har en kant runt dorren. det ar en imagemap och bor i sa fall ha en kant i IE/mac. jag tittade forut och sag ingen. Jag tror att det har att gora med att image-ytorna ar lankar. om du tittar i deras style.see:

http://www.deathball.net/notpron/style.css

body {
	color : #FFFFFF;
	background-color : #000000;
	font-family : Arial;
}
h1 {
	font-family: Arial;
}
a:link	{	color: #FFFFFF		}
a:visited	{	color: #FFFFFF		}
a:hover	{	color: #FFFF00		}
a:active	{	color: #FFFFFF		}

de har ju uppenbarligen intruerat att lankarna ska vara vita(?) for att gomma dem.

testa om det funkar.. jag inser ju att du inte vill ha ALLA lankar vita.. darfor finns det ngt sa smart som klasser.. du kan ha en lank som heter en speciell klass som bara galler for din imagemap..

exempel:
i din style.css skriver du:

a.imap:visited {color: #FFFFFF}
a.imap:hover {color: #FFFFFF}
a.imap:active {color: #FFFFFF}

sen dar du har dina lankar med imap maste du saga att de ska vara av den klassen:

<a class="imap" href="#">Per</a>

kolla och meka lite och se om du far det att funka..

skriv garna hur det gar.. jag ar intresserad att hora..!

1
Bevaka tråden