Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Css runda hörn på bild

1
Skriv svar
Permalänk
Medlem
●

Css runda hörn på bild

Jag vill med css göra så att den bild jag klistrar in alltid får rundade hörn, går detta göra?

Visa signatur

Icedor.se Hampis Ge Site IP Iceycloud.com PartyOnTube
Webbkritik

Redigera
Citera flera Citera
Permalänk
Medlem
●

Google är din vän!

En sökning på "css rounded corners" visar bl.a. följande svar:

http://www.cssjuice.com/25-rounded-corners-techniques-with-cs...
http://www.smileycat.com/miaow/archives/000044.php

Så svaret på din fråga är .. "Ja!"

Visa signatur

/Mvh Stefan

Redigera
Citera flera Citera
Permalänk
Medlem
●

Har läst bägge de där, funkar inte för bilder.

Google vet jag hur det funkar. Lovar.

Kanske förklarade mig otydligt, det jag vill ha är alltså så att jag sätter in en bild i en div och skär kanterna på bilden så den blir rundad oberoende på bildens storlek. (Istället för att manuellt runda alla hörn på bildern som man lägger upp)

Kanske något i stil med att en div anpassar sig efter bildens storlek med en vit ram för att kompensera för bakrunden och sedan lägger sig ovanför bildens yta?

Visa signatur

Icedor.se Hampis Ge Site IP Iceycloud.com PartyOnTube
Webbkritik

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av -=*ThE_cRoW*=-
Har läst bägge de där, funkar inte för bilder.

Google vet jag hur det funkar. Lovar.

Kanske förklarade mig otydligt, det jag vill ha är alltså så att jag sätter in en bild i en div och skär kanterna på bilden så den blir rundad oberoende på bildens storlek. (Istället för att manuellt runda alla hörn på bildern som man lägger upp)

Kanske något i stil med att en div anpassar sig efter bildens storlek med en vit ram för att kompensera för bakrunden och sedan lägger sig ovanför bildens yta?

Aha, du menar så, sorry!

Men ja, det borde gå genom att ha en eller flera "rambilder" (beroende på om bilderna ska kunna vara olika storlekar) som du positionerar rakt ovanpå bilden med hjälp av absolute och relativ positionering .. ska se om det går att snickra ihop något fint exempel.

Mega Edit:
Nu blev det lite knepigare om den ska kunna anpassas efter bildens storlek. Har du tillgång till PHP / ASP så du kan skriva ut bildstorleken t.ex.? Är det ok att blanda in javascript?

Senast redigerat
Visa signatur

/Mvh Stefan

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jo, jag vet, har också insett problemet. =/

De är så här att de skall in i ett mycket större system senare med någon typ av dot.net lösning och den kommer jag inte vara involverad i då jag gör bara teamplaten.

Men kan du hitta på något med en kort javascript snutt så skulle jag vara väldigt tacksam.

Visa signatur

Icedor.se Hampis Ge Site IP Iceycloud.com PartyOnTube
Webbkritik

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du skulle kunna använda det här kanske: http://www.webdesignskolan.se/css-effekter/round_corners/roun...

Och sen blanda in javascript för att ta reda på bildens storlek och anpassa css boxarna därefter.

Visa signatur

AMD Athlon 64 3200+ // Asus K8V-VM // 1 GB DDR 400 // Asus EN7600 GS // Soundblaster Live! // FSP 350W // Ubuntu 9.10
MacBook 13,3 // 2.2 GHz Core 2 Duo // 4 GB DDR2 667 // 120 GB HDD // Intel GMA X3100 // Mac OS X 10.6
HP e-PC 42 // P4 1,7 Ghz // 512MB SDRAM // 500 GB HDD // Ubuntu Server 8.04

Redigera
Citera flera Citera
Permalänk
Medlem
●

För ca ett år sen funderade jag över samma sak som dig (http://www.sweclockers.com/forum/showthread.php?s=&threadid=6...). Från den kod jag kom fram till skapade jag en JavaScript-funktion som loopar igenom alla <img> på sidan och lägger till nödvändiga <div> med rätt width och height. Observera att alla <img> måste omslutas av en <div> (går säkert att fixa i funktionen så att det läggs till automatiskt). För mitt ändamål fungerade det bra. Vet inte hur pass bra det fungerar i ett "större system" då funktionen ändrar ALLA bilder på sidan. Borde vara enkelt att lägga till t.ex. id="roundCorner" eller liknande för de bilder som ska ha runda hörn. I for-loopen ignoreras sen alla <img> vars id inte är korrekt.

Hoppas du får användning av det.

<html>	
<head>
<script language="JavaScript" type="text/JavaScript">

function makeRoundCorners() {  
  var images = document.getElementsByTagName('img');  
  for (i = 0; i < images.length; i++) {
    var imageWidth = images[i].width;
    var imageHeight = images[i].height;
    var html =  "<div style=\"background: url('tl.gif') no-repeat top left; position: absolute; width: " + imageWidth + "px; height: " + imageHeight + "px;\"></div>";
    html = html + "<div style=\"background: url('tr.gif') no-repeat top right; position: absolute; width: " + imageWidth + "px; height: " + imageHeight + "px;\"></div>";
    html = html + "<div style=\"background: url('bl.gif') no-repeat bottom left; position: absolute; width: " + imageWidth + "px; height: " + imageHeight + "px;\"></div>";
    html = html + "<div style=\"background: url('br.gif') no-repeat bottom right; position: absolute; width: " + imageWidth + "px; height: " + imageHeight + "px;\"></div>";
    html = html + "<img src='" + images[i].src + "' width='" + imageWidth + "' height='" + imageHeight + "'>";
    images[i].parentNode.innerHTML = html;
  }
}
</script>


</head>

<body onLoad="makeRoundCorners()">
  <div><img src="bild1.jpg" width="150" height="400></div>
  <div><img src="bild2.png"></div>
  <div><img src="bild1.jpg" width="350" height="213"></div>
</body>
</html>
Redigera
Citera flera Citera
Permalänk
Medlem
●

Här kommer mitt försök:
http://bleh.se/dump/bildram/

Det som krävs för bilden är att den har klassen "roundedPic".

Testad i IE7, IE6 och FF3 på Windows. Två bilder har klassen "roundedPic" och den tredje har det inte.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
	.imgContainer {
		position: relative;
	}
	
	.borderDiv {
		border: 10px solid #fff;
		position: absolute;
	}
	 
	.topLeftCorner {
		position: absolute;
		top: 0;
		left: 0;
	}
	.topRightCorner {
		position: absolute;
		top: 0;
		right: 0;
	}
	.bottomLeftCorner {
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.bottomRightCorner {
		position: absolute;
		bottom: 0;
		right: 0;
	}
</style>

<script type="text/javascript">
	function addLoadEvent(func) {
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = func;
		} else {
			window.onload = function() {
				oldonload();
				func();
			}
		}
	}

/*
       getElementsByClassName
	Written by Jonathan Snook, http://www.snook.ca/jonathan
	Add-ons by Robert Nyman, http://www.robertnyman.com
*/

function getElementsByClassName(oElm, strTagName, strClassName){
	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	strClassName = strClassName.replace(/\-/g, "\\-");
	var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
	var oElement;
	for(var i=0; i<arrElements.length; i++){
		oElement = arrElements[i];
		if(oRegExp.test(oElement.className)){
			arrReturnElements.push(oElement);
		}
	}
	return (arrReturnElements)
}
	
	function initPage() {
		var images = getElementsByClassName(document,'img','roundedPic');
		var imgLength = images.length;
		for(i=0; i<imgLength;i++) {
			imgdx = images[i].width;
			imgdy = images[i].height;
			
			var currentImage = images[i];
			
			var div = document.createElement('div');
			div.className = "imgContainer";
			div.style.width = imgdx+"px";
			div.style.height = imgdy+"px";
			
			var borderDiv = document.createElement('div');
			borderDiv.style.width = imgdx-20+'px';
			borderDiv.style.height = imgdy-20+'px';
			borderDiv.className = 'borderDiv';
			
			div.appendChild(borderDiv);
			
			var topLeftCorner = document.createElement('img');
			topLeftCorner.src = 'topLeftCorner.gif';
			topLeftCorner.className = 'topLeftCorner';
			
			div.appendChild(topLeftCorner);

			var topRightCorner = document.createElement('img');
			topRightCorner.src = 'topRightCorner.gif';
			topRightCorner.className = 'topRightCorner';
			
			div.appendChild(topRightCorner);

			var bottomLeftCorner = document.createElement('img');
			bottomLeftCorner.src = 'bottomLeftCorner.gif';
			bottomLeftCorner.className = 'bottomLeftCorner';
			
			div.appendChild(bottomLeftCorner);

			var bottomRightCorner = document.createElement('img');
			bottomRightCorner.src = 'bottomRightCorner.gif';
			bottomRightCorner.className = 'bottomRightCorner';
			
			div.appendChild(bottomRightCorner);
			
			currentImage.parentNode.insertBefore(div,currentImage);
				
			div.appendChild(currentImage);
		}
	};
	
	addLoadEvent(initPage);
</script>
</head>
<body>
		<img src="bild1.jpg" width="320" height="240" class="roundedPic" alt="Fin bild" />
		<img src="bild1.jpg" width="620" height="390" class="roundedPic" alt="Ful bild" />

		<img src="bild1.jpg" width="320" height="240" alt="Utan ram" />
</body>
</html>
Senast redigerat
Visa signatur

/Mvh Stefan

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack för de jättebra svaren!

Rimion, jag har tänkt använda din, men jag vill sätta den på en bild class som heter "rundahorn" hur ska då raden:

var images = document.getElementsByTagName('img');

Se ut, för det blir bara den att ändra va?

Visa signatur

Icedor.se Hampis Ge Site IP Iceycloud.com PartyOnTube
Webbkritik

Redigera
Citera flera Citera
Permalänk
Medlem
●

Crow: Du måste även sätta in en if-sats som kollar ifall images[i].className == 'rundahorn'. Sen kommer problemet att images[i] kommer att ändras runt lite medans loopen kör eftersom en bild läggs till och så blir det pannkaka, FF exploderar och alla dör (nåväl, inte riktigt, men jag åkte på samma problem när jag gjorde min variant).

Det lättaste är att lägga in "getElementsByClassName"-funktionen som jag använde och sen använda den för att fylla images-variabeln:

var images = getElementsByClassName(document,"img","rundahorn");
Visa signatur

/Mvh Stefan

Redigera
Citera flera Citera
Permalänk
Medlem
●

Blev så här till slut:

Citat:

<script language="JavaScript" type="text/JavaScript">
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
function makeRoundCorners() {
var images = document.getElementsByClassName('rundahorn');
for (i = 0; i < images.length; i++) {
var imageWidth = images[i].width;
var imageHeight = images[i].height;
var html = "<div style=\"background: url('images/tl.gif') no-repeat top left; position: absolute; width: " + imageWidth + "px; height: " + imageHeight + "px;\"></div>";
html = html + "<div style=\"background: url('images/tr.gif') no-repeat top right; position: absolute; width: " + imageWidth + "px; height: " + imageHeight + "px;\"></div>";
html = html + "<div style=\"background: url('images/bl.gif') no-repeat bottom left; position: absolute; width: " + imageWidth + "px; height: " + imageHeight + "px;\"></div>";
html = html + "<div style=\"background: url('images/br.gif') no-repeat bottom right; position: absolute; width: " + imageWidth + "px; height: " + imageHeight + "px;\"></div>";
html = html + "<img src='" + images[i].src + "' width='" + imageWidth + "' height='" + imageHeight + "'>";
images[i].parentNode.innerHTML = html;
}
}
</script>

<script type="text/javascript" src="swfobject.js"></script>

Tack för all hjälp grappar!

Visa signatur

Icedor.se Hampis Ge Site IP Iceycloud.com PartyOnTube
Webbkritik

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara