webForumDet fria alternativet

Olika bilder

10 svar · 290 visningar · startad av JaZzE

JaZzEMedlem sedan dec. 200310 inlägg
#1

Tjena jag behöver lite hjälp. :D Med följande script.
Jag undrar ifall det går att göra så den lilla bilden är olik den stora, alltså lilla; tavla1.jpg Stora; tavla2.jpg , tavla2 har en ram som jag vill ska synas på den stora bilden men inte på den lilla.

<html>
<Head>
<script language="javascript">
<!--This is one of many scripts which are available at:     *---
//--http://www.JavaScript.nu/javascript                     *---
//--This script is FREE, but you MUST let these lines       *---
//--remain if you use this script.                          *---

//***---Detta visas då musen dras över bilden
PreviewText="Press to enlarge";

//***---Ruvriken av det nya fönster som innehåller den förstorade bilden
NewWindowTitle="Titel på målningen";

//***---Visas då musen förs över den förstorade bilden i det nya fönstret
ClickToCloseText="Press to exit";

function visaBild(imageURL, showThisSize, width, height)
{
newHeight=Math.round(height*showThisSize/width);
document.write("<A HREF=\"javascript:showRealSize('"+imageURL+"', "+width+", "+height+");\"><IMG SRC='"+imageURL+"' WIDTH='"+showThisSize+"' HEIGHT='"+newHeight+"' BORDER='0' ALT='"+PreviewText+"'></A>")
}

function showRealSize(imageURL, width, height)
{
NewImageWindow=window.open("", Math.round(Math.random()*10000000000), "width="+width+",height="+height);
NewImageWindow.document.open();
NewImageWindow.document.write("<HTML><HEAD>");
NewImageWindow.document.write("<TITLE>"+NewWindowTitle+"</TITLE>");
NewImageWindow.document.write("</HEAD>");
NewImageWindow.document.write("<BODY MARGINHEIGHT='0' TOPMARGIN='0' LEFTMARGIN='0' RIGHTMARGIN='0' MARGINWIDTH='0'>");
NewImageWindow.document.write("<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0><TR><TD><A HREF='javascript:top.close();'><IMG SRC='"+imageURL+"' WIDTH='"+width+"' HEIGHT='"+height+"' ALT='"+ClickToCloseText+"' BORDER='0' HSPACE=0 VSPACE=0></A></TD></TR></TABLE>");
NewImageWindow.document.write("</BODY></HTML>");
}
//-->
</script>
</head>
<body>
<script language="javascript">
<!--
//***---Nedan beskrivs vad värdena som du ska skriva är för något
//***---1.) ("tavla1s.jpg")	Adressen till bilden
//***---2.) (101)		Bilden ska förminskas och visas med så här många pixlar på bredden
//***---3.) (300)		Så här stor ska bildens bredd vara då fönstret visas. Detta värde bör vara lika med bildens riktiga bredd-värde
//***---4.) (300)		Så här stor ska bildens höjd vara då fönstret visas. Detta värde bör vara lika med bildens riktiga höjd-värde

visaBild("tavla1s.jpg", 101, 300, 300);

//-->
</script>
</p>
</body>
</html>
nitro2k01Medlem sedan aug. 20037 630 inlägg
#2

Ramen finns alltså i bilden eller vill du fixa det med HTML / CSS?

Välkommen till wF

JaZzEMedlem sedan dec. 200310 inlägg
#3

Ja ramen är ju själva ramen på tavlan, den är inte "digital" eller va man ska säga :D

Tack. :bire

nitro2k01Medlem sedan aug. 20037 630 inlägg
#4

Är det skriptet du behöver hjälp med eller att beskära bilden. Ska du beskära måste du ha något bildbehandlingsprogram. Photoshop kan funka eller till och med Paint.

<script language="javascript">
<!--
//***---Nedan beskrivs vad värdena som du ska skriva är för något
//***---1.) ("tavla1s.jpg")	Adressen till bilden
//***---2.) (101)		Bilden ska förminskas och visas med så här många pixlar på bredden
//***---3.) (300)		Så här stor ska bildens bredd vara då fönstret visas. Detta värde bör vara lika med bildens riktiga bredd-värde
//***---4.) (300)		Så här stor ska bildens höjd vara då fönstret visas. Detta värde bör vara lika med bildens riktiga höjd-värde

// Eller vilka storlekar det nu kan vara...
visaBild("tavla1.jpg", 101, 300, 300);
visaBild("tavla2.jpg", 101, 300, 300);

//-->
</script>
JaZzEMedlem sedan dec. 200310 inlägg
#5

Det är skriptet jag behöver hjälp med.

Det skriptet du skickade gjorde bara så att det kom en till liten bild.

Det jag vill ha är att Den lilla och den stora ska vara olika.
Som det är nu så blir dom lika.

nitro2k01Medlem sedan aug. 20037 630 inlägg
#6
  1. Kolla så att tavla1.jpg och tavla2.jpg inte är samma bild
  2. Ändra de värden som styr storleken
JaZzEMedlem sedan dec. 200310 inlägg
#7

Nä det funkade inte, men jag ändrade body skriptet till;

<script language="javascript">
<!--
//***---Nedan beskrivs vad värdena som du ska skriva är för något
//***---1.) ("tavla1s.jpg")	Adressen till bilden
//***---2.) (101)		Bilden ska förminskas och visas med så här många pixlar på bredden
//***---3.) (300)		Så här stor ska bildens bredd vara då fönstret visas. Detta värde bör vara lika med bildens riktiga bredd-värde
//***---4.) (300)		Så här stor ska bildens höjd vara då fönstret visas. Detta värde bör vara lika med bildens riktiga höjd-värde

// Eller vilka storlekar det nu kan vara...
visaBild("tavla1s.jpg", 101, 300, 300);
showRealSize("tavla1b.jpg", 300, 300);

//-->
</script>

Då öppnades bilden med ramen, men direkt man gick in på den sidan, så jag antar att man ska inaktivera nån popup grej eller aktivera nån Onclick grej :D

nitro2k01Medlem sedan aug. 20037 630 inlägg
#8

Alltså om jag har förstått dig rätt: Du vill ha två miniatyrbilder, en med och en utan ram, sen när man klickar på respektive ska en popup komma upp med bilden förstorad?

JaZzEMedlem sedan dec. 200310 inlägg
#9

mm

EDIT: du kan gå in på sidan och kolla hur det blir

JaZzEMedlem sedan dec. 200310 inlägg
#10

alltså det behöver inte just vara det här scriptet, det kan vara "hemmagjort" också.

Man ska kunna klicka på en liten bild så kommer det en popup som är större. popupen ska vara anpassad till större bilden.

JaZzEMedlem sedan dec. 200310 inlägg
#11

Jag hittade ett annat skript som var exakt det jag ville ha.

<head>
<script language="JavaScript">
<!-- Begin
function popUp() {
props=window.open('din_websida.htm', 'poppage', 'toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=200, height=300 left = 100, top = 100');
}
// End -->
</script>
</head>
<body>
<A HREF="javascript:popUp()">Klicka här!</A>
</body>

Och om man vill som jag ha en bild som länk, så byter man ut det i <body> mot;

<img src="din_bild.jpg" alt="" height="300" width="300" border="0">
Genererad på 394 ms · cache AV · v20260730165559-full.f96bc7eb