STÖRRE BILDER

Har fått en fråga om hur man gör större bilder till bloggen. Tänkte svara på det lite snabbt!

1. Du går in på Design→Stilmall och så bläddrar du ned till #content {

#content {
background:#ffffff;
overflow: hidden;
width: 598px;
position:relative;
left:0px;
padding: 20px 2px;
voice-family:"\"}\"";
voice-family:inherit;
width:598px;
float: right;
margin: 0px;
}html>body #content { width: 650px }
#content {
background:#ffffff;
overflow: hidden;
width: 598px;
position:relative;
left:0px;
padding: 20px 2px;
voice-family:"\"}\"";
voice-family:inherit;
width:598px;
float: right;
margin: 0px;
}html>body #content { width: 650px }

2. Den delen som är med tjockare text är den du ska ändra på.

3. Ändra lite i taget för att se hur stor den kan bli innan menyn lyttas ned (för att den inte får plats) och jag kan tex ha 650 för att jag har ändrat storleken på #wrapper
{ och #header
{

#wrapper {
clear:none;
margin: 10px auto;
padding: 5px;
width: 886px;
background-color:;
}
......
#header {
background: #ffffff url (här står din header) no-repeat right center;
padding-left: 22px;
padding-bottom:5px;
padding-top:0px;
margin: 0px 0px 20px;
width: 866px;
height: 500px;
}
Nu får du mixtra lite med allt och så får du se hur stora bilder du kan få! Du ändrar ju storleken på bilderna här:

Ladda upp bild

(Välj fil) (Bilden får inte vara större än 8MB)
Miniatyr
Full storlek

Fattar du inte?
Kommentera här under om du behöver hjälp så kan jag nog hjälpa dig! 
....................................................................................................................................................
Har du en designfråga till mig?
Skriv en kommentar!
Jag ska försöka svara på alla frågor du kan behöva hjälp med!

Mouseover

Hej!
Tänkte visa hur man gör en mouseoverbild! En bild som ändras när man drar musen över den. Jag har sådana på t.ex mina länkar eller till min kamerautrustning i menyn.
.
1. Börja med att göra två bilder, t. ex:
.
Bild 1:
Bild 2:
2. Kopiera sedan bildadresserna såhär:
.
Bild 1: https://cdn3.cdnme.se/cdn/7-2/2271653/images/2011/kamerautrustning_152086276.jpg
Bild 2: https://cdn2.cdnme.se/cdn/7-2/2271653/images/2011/kamerautrustning2_152086528.jpg
.
3. Spara detta i utkastet, du kommer behöva detta senare..
.
4. Klistra in denna kod i alla kodmallar över </head> (högt upp). ↓
.
<script LANGUAGE="JavaScript">
<!--
// This is the implementation of SimpleSwap
// by Jehiah Czebotar
// Version 1.1 - June 10, 2005
// Distributed under Creative Commons
//
// Include this script on your page
// then make image rollovers simple like:
// <img src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif">
//
// http://jehiah.com/archive/simple-swap
//
function SimpleSwap(el,which){
el.src=el.getAttribute(which || "origsrc");
}
function SimpleSwapSetup(){
var x = document.getElementsByTagName("img");
for (var i=0;i<x.length;i++){
var oversrc = x[i].getAttribute("oversrc");
if (!oversrc) continue;
// preload image
// comment the next two lines to disable image pre-loading
x[i].oversrc_img = new Image();
x[i].oversrc_img.src=oversrc;
// set event handlers
x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
x[i].onmouseout = new Function("SimpleSwap(this);");
// save original src
x[i].setAttribute("origsrc",x[i].src);
}
}
var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}
//-->
</script>
<script LANGUAGE="JavaScript">
<!--
// This is the implementation of SimpleSwap
// by Jehiah Czebotar
// Version 1.1 - June 10, 2005
// Distributed under Creative Commons
//
// Include this script on your page
// then make image rollovers simple like:
// <img src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif">
//
// http://jehiah.com/archive/simple-swap
//
function SimpleSwap(el,which){
el.src=el.getAttribute(which || "origsrc");
}
function SimpleSwapSetup(){
var x = document.getElementsByTagName("img");
for (var i=0;i<x.length;i++){
var oversrc = x[i].getAttribute("oversrc");
if (!oversrc) continue;
// preload image
// comment the next two lines to disable image pre-loading
x[i].oversrc_img = new Image();
x[i].oversrc_img.src=oversrc;
// set event handlers
x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
x[i].onmouseout = new Function("SimpleSwap(this);");
// save original src
x[i].setAttribute("origsrc",x[i].src);
}
}
var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}
//-->
</script>
.
5. Nu ska du klistra in denna kod där du vill ha din mouseoverbild.
.
<a onfocus="blur()" href="länken"><img src="bildadress 1" oversrc="bildadress 2" border="0"/></a>
.
6. Där det står "länken" ska du skriva länkadressen som du vill att bilden ska länkas till. Där det står
"bildadress 1", "bildadress 2" ska du klistra in adresserna till bilderna du gjorde i steg 2 ↑↑
.
7. Om du bara vill göra mouseoverbilder (utan länk) ska du klistra in detta istället ↓
.
<img src="bildadress 1" oversrc="bildadress 2" border="0">
..
NU VAR DET KLART! Easy? Igentligen ganska krångligt..

Fattar du inte?
Kommentera här under om du behöver hjälp så kan jag nog hjälpa dig! 
....................................................................................................................................................
Har du en designfråga till mig?
Skriv en kommentar!
Jag ska försöka svara på alla frågor du kan behöva hjälp med!

Hur jag gör "raden" i headern

Fråga:
elsa om Länkbyte #6:
får jag fråga en designfråga? hur gör du "raden" längst ned i din header i picnik.com? :o
Svar:
1. Gör först en helt vanlig vit bild väldigt smal genom att "crop" den. Spara den bilden.
2. Gör sedan din header.
3. När du vill sätta dit den vita randen öpnar du bara bilden och klistrar in den vita randen
över din header där du vill ha den.
4. Klicka på "fade" så att den blir svagare så att man kan se bilden bakom en aning (hur
mycket bestämmer man själv).
5. Sedan är det bara att pyssla lite med den och sätta text över och så är det klart!
Easy right?
Man behöver inte picnik-premium för att göra detta!

Fattar du inte?
Kommentera här under om du behöver hjälp så kan jag nog hjälpa dig! :)
....................................................................................................................................................
Har du en designfråga till mig?
Skriv en kommentar!
Jag ska försöka svara på alla frågor du kan behöva hjälp med!


RSS 2.0