이미지 (Image tag)
이미지 또는 사진 등과 관련된 img 태그를 활용하는 자바스크립트 소스
[21] 이미지 미리 로딩하기 [Preview]
<html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
100s of free ready to use scripts, tutorials, forums.
Author: JS-Examples - http://www.js-examples.com/
-->

<script language="JavaScript">
<!-- // preload photos
var mypix = new Array()
function preloadImages(){
for (i=0; i<preloadI .....
[22] 클릭하면 이미지를 바꾸는 함수 [Preview]
<%@ Language=VBScript %>
<html>
<head>
<meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</head>
<body>&&
<%
Response.Write Server.Mappath(".")

%>**

<hr>
<html>
<head>
<title>Untitled</title>
<script>
function chk(that){
alert(that.src);
alert(that.name);
da .....
[23] 이미지 바뀔때 사운드도 함께 들려주는 함수 [Preview]
<SCRIPT>
homeron=new Image()
homeron.src="images/homer.gif"
homeroff=new Image()
homeroff.src="images/homer3.gif"
</SCRIPT>

<A href="#" onMouseOver="document.images[0].src=homeron.src;document.embeds[0].play()"
onMouseOut="document.images[0].src=homeroff.src;document.embeds[1].play()">
<IMG src="images/homer3.gif" border="0"></A> < .....
[24] 간단하게 랜덤 이미지 보여주는 함수 [Preview]
<IMG name="randomImage">

<SCRIPT>
num=Math.floor(Math.random()*3)
if(num==0) {document.randomImage.src="images/rotate.gif"}
if(num==1) {document.randomImage.src="images/pulse.gif"}
if(num==2) {document.randomImage.src="images/spinning.gif"}
</SCRIPT>
[25] 이미지 로딩중 중지버튼이 눌러지면 경고창 보여주기 [Preview]

<SCRIPT LANGUAGE="JavaScript">
function imageAlert() {
alert("You have not loaded the main image map of this page, this image is approximately 26K and must be completely loaded in order to navigate the rest of this website.");
return " ";
}
</SCRIPT>
<CENTER>
<IMG SRC="file:///c|/html/javascript/image.jpg" width=252 height=289 onAbort='imageAlert();'>
& .....
[26] 이미지를 불러오는 도중 중단한 경우 이를 확인하는 메세지를 출력하는 예제입니다. [Preview]
<SCRIPT LANGUAGE=JavaScript>
function DontKillWindow() {
myWindow = window.open("", "ConfirmWindow", "toolbar=no,directories=no,menubar=no,scrollbars=no,width=250,height=200");
myWindow.document.write("<HTML><HEAD><TITLE>Confirm...</TITLE>");
myWindow.document.write("</HEAD><BODY BGCOLOR=FFFFFF><CENTER>");
myWindow.document.write("<H1>Are you sure you want to .....
[27] 이미지가 없어서 에러나는 경우 자동으로 두번째 이미지를 보여주는 소스 [Preview]
이 소스는 지정된 이미지가 없는 경우, 아주아주 간단하게
자동으로 두번째 이미지를 보여주는 소스입니다.

아주 유용할거 같네요.

<ltSCRIPT LANGUAGE="JavaScript">
function altImage() {
document.images[0].src="file:///c|/html/javascriptcup.jpg";
}
</SCRIPT>
<tP>
<IMG SRC="file:///c|/html/javascriptclockerr.jpg" width=180 height=180 onError="altImage()">


[28] 플립플롭(? - 소스 원제였음..)되는 이미지 입니다. [Preview]
이미지가 플립플롭 되는 소스 입니다..
(플립플롭 - flip-flop : 해당 소스의 제목)

이미지가 둘어드는 효과를 낸걸로 꽤 괜찮네요..
[29] 두개의 이미지 맵과 두개의 레이어를 이용해서 설명을 보여주는 소스입니다. [Preview]

링컨 얼굴위에 마우스를 올리면 설명용 레이어가 나옵니다.<br>
응용을 하면 설명대신 다른 이미지를 보여줄수도 있습니다.<br>
<br>
링컨 옆에 있는 사람의 얼굴위로 마우스를 가져가면 그 사람에 대한 설명이 나옵니다.<br>
어떤분이 두개인 경우를 부탁해서리....^*^<br>
간단하게 함수를 중복해서 만들었는데 약간 응용하시면 함수하나와 인수를 이용해서 만들수도 있습니다.<br>
그럼 프로그램의 소스가 더 간결하게 보일겁니다.
[30] 메인 페이지에 사용되면 좋은 이미지 미리받기 소스 입니다. [Preview]
메인 페이지에 사용하면 좋은 이미지 미리받기 소스 입니다..

보통 홈페이지에서 크기가 큰 이미지가 많으면
새로여는 페이지일때 일일이 이미지를 받지만..
이 소스는 메인 페이지 뜨기전(이 부분에 가장 좋습니다.)에 홈페이지에 사용되는
이미지를 받아두기 때문에 좀더 빠르게 페이지 이동이 가능합니다..

직접 써보시고.. 보세요..
예제 소스가 있는 압축 파일은 미리보기에 있습니다..

그럼.. ^^

(이 소스는 steelheart님의 소스로 출처 홈페이지는 http://steelheart.pe.kr/ 입니다.)
[31] 이미지 맵을 이용해서 마우스 오버시 설명을 보여주는 소스입니다. [Preview]
이미지 맵을 응용한 설명이 가능한 레이어를 보였다가 숨기는 기능이 있습니다.

링컨 얼굴위에 마우스를 올리면 설명용 레이어가 나옵니다.
응용을 하면 설명대신 다른 이미지를 보여줄수도 있습니다.
[32] 클릭과 더블클릭으로 이미지 사이즈 바꾸기 [Preview]
스타일을 이용해서 이미지의 크기와 보여주는 이미지를 바꾸는 예제입니다.

이미지를 클릭하면 원래 이미지가 나옵니다.
다시 더블 클릭하면 작은 이미지로 돌아갑니다.

문장이 있는데 그림을 간단하게 넣고 필요시 불러볼때 특별한 프로그램없이
사용할 수 예제입니다.
[33] 선택식(?) 이미지 체인저 소스 [Preview]
샌택식 이미지 체인저 입니다..

이미지의 리스트를 놔두고 해당 이미지를 누르면 이미지가 뜨도록 하는것 입니다.
[34] 이미지로 이루어진 액정(?)창 [Preview]
이미지로 이루어진 액정창 입니다..

여기선 한글은 사용하지 못하며
대 소문자 구별없이 대문자로만 나옵니다..

꽤 괜찮은 소스 입니다..

소스에서 버튼을 사용하기 싫으시면 //로 주석처리 해주시면 됩니다.
[35] 마우스 올리면 이미지가 진해지는 소스 [Preview]
이미지에 마우스를 올리면 이미지가 잰해지는 소스 입니다.

소스는 간단합니다..
그냥 스타일 시트를 자스화 시켜놓고
이미지를 스타일 시트에 적용시키는 겁니다..

추가는 그냥 하시되
onmouse부분은 꼭 복사해주셔야 합니다.
[36] 이미지를 드래그하면 이미지가 자유자재로 커지는 소스 [Preview]
이미지 위에서 드래그를 하면
이미지가 자유자재로 늘어납니다..
[37] 눈동자가 마우스 따라서 움직이는 스마일 [Preview]
스마일의 이미지에 눈동자가 마우스를 따라서 움직입니다.
그리고 이미지를 누르면 정해놓은 주소로 이동도 합니다.
[38] 이미지로된 라디오 버튼 [Preview]
input의 radio를 이미지로 해놓은 소스입니다.
잘만 응용하면 기존의 radio버튼과 동일하게
사용하실 수 있을겁니다.
[39] 더블클릭하면 이미지가 커지는 소스 [Preview]
이미지에서 더블클릭을 하게 되면
지정된 크기만큼 이미지가 늘어나거나
줄어드는 자스입니다.
[40] 핫 링크위에 마우스를 가져가면 레이어 안의 이미지가 바뀌는 예제 [Preview]
이미지 앨범용으로 괜찮을거 같은 소스입니다.

지정된 링크위로 마우스 오버시 레이어 안에 있는 이미지를 바꾸어 팦업으로 보여주는
예제입니다.
레이어 핸들링과 이미지 핸들에 대해 이해하기 쉬운 소스입니다.

    [1] [2] [3] [4] [5]    
Javascript Source List :