myGeeBlog » html

Wymiary obrazków w html

MySZ — Thu, 02 Feb 2006 15:53:46 +0000

W ramach treningu o zabawy, w wyniku pewnego zapytania napisałem takie coś – może się komuś przyda. Jako parametr należy podać nazwy plików html w których należy uzupełnić tagi o wymiary obrazków.

#!/usr/bin/env python
# -*- coding: iso-8859-2 -*-
import os.path
import re
import Image
import sys

if len(sys.argv) == 1:
  print 'Podaj nazwy plików'

def replace(html):
  rx = r'''(?im)(<\\s*img\\s*src=(["'])(?P.*?)\\2.*?/>)'''
  imgs = re.findall(rx, html) #, re.I|re.M)
  if imgs:
    for imgtag, tmp, fname in imgs:
      if imgtag.find('width=') == -1 and\\
          imgtag.find('height=') == -1 and\\
          os.path.isfile(fname):
        intag = 'width="%dpx" height="%dpx"' % Image.open(fname).size
        ntag = imgtag[:-2] + intag + ' />'
        html = html.replace(imgtag, ntag)
  return html

files = sys.argv[1:]
for f in files:
  if not os.path.isfile(f):
    print 'Nie znaleziono:', f
    continue
  html = replace(open(f).read())
  open(f, 'w').write(html)

Wymagany jest moduł PIL.

Oczywiście jest to mocno niedopracowane, ale napisanie tego to było dosłownie kilka minut, dla zabawy, a jako że to jest python, to łatwo samemu to dopracować i poprawić :) Ważne, że działa jak powinno…

niemrugajacy rollover bez preloadu

MySZ — Mon, 05 Sep 2005 23:40:49 +0000

jako ze chociaz chwilowo minela mi ostatnia niemoc odnosnie moich wysilkow wziecia sie za jakakolwiek prace (czesciowo zwiazana z moja choroba), to opisze sobie dla sportu pewien prosty trick:

wiekszosc osob dluzej zajmujaych sie tematem zna ten sposob, zreszta zostal ladnie opisany przez Yano na pcw faq, ale tutaj bedzie minimalnie zmodyfikowana wersja pozwalajaca na nieznajomosc (teoretyczna) wysokosci obrazka. generalnie trick polega na tym, ze wersja obrazka z hoverem stanowi wraz z wersja bez hovera jedna calosc, dzieki czemu po zaladowaniu sie obrazka, nie ma juz czego doladowywac (jesli chodzi o zmieniajace sie obrazki w hoverze za pomoca js czy tez innych metod… :) ). ja robie to tak:

tworze obrazek (tak jak ladnie opisal Yano), tak ze na dole jest wersja taka, jaka ma sie wyswietlic po ‘najechaniu; kursorem nad obrazek/link. wyzej ma byc wersja jaka sie wyswietla domyslnie. i kod:

html

css

a { display: block; width: 10px; height: 10px; background: #fff url('obrazek.png') top center no-repeat; } a:hover { background-position: bottom center; }

co prawda jest trudniej dorobic trzeci stan (wrecz sie nie da, trzeba wtedy skorzystac z przesuniec w pikselach jak w wersji Yano), ale zazwyczaj tego trzeciego stanu sie nie robi, wtedy znacznie prosciej jest zamiast liczyc polowki i wartosci przesuniec, wpisywac top/bottom

inna sprawa jest wai i co zrobic, jesli ktos ma wylaczone sciaganie obrazkow, ale to temat na osobna opowiesc… ;)

layout na 3 kolumny

MySZ — Tue, 25 Jan 2005 13:38:43 +0000

jako ze larkowi pokazywalem jak najprosciej stworzyc dzialajacy w geckowatych i ie layout 3 kolumnowy, to go tu zamieszcze. moze sie komus przyda (informuje, ze to tylko ogolny zarys, i nie ma dopracowanych wartosci marginesow/paddingow dla innych niz gecko, ale poza tym powinno byc ok)

acha, dzialac bedzie w gecko i ie6 i operze 7.5. w starszych – nie wiem. mam ten luksus, ze moge je olac… :)



        
                layout 3 kolumnowy
                
                
                
        
        v id="main">
                        NAGLOWEK
                        KOLUMNA LEWA
                        SRODEK
                        KOLUMNA PRAWA
                        
                        STOPKA

tylko nie wiem czy nie wystarczyloby dodac do #footer clear: both; i wywalic .clear (tzn nie wiem czy bedzie dzialac pod ie, bo pod gecko/opera na pewno)

przyklad tutaj