본문 바로가기

Local Oriented/HTML CSS JS

 (105)
IE 에서는 잘 되는데 크롬 등등에선, 이미지 맵으로 된 링크 작동이 이상.. 코드는 아래와 같구요..작동은 leftMenu 나 rightMenu 상의 img 위에 마우스가 올려지면, centerVisual의 이미지가 바뀌는 겁니다.centerVisual 에 올려지는 이미지에는 이미지맵 세팅되고, 각각 링크가 걸려 있어요.top 영역 밖으로 마우스가 이동하면 기본 이미지가 centerVisual 에 세팅됩니다.그런데, IE 에서는 제대로 동작을 하는데..크롬이나 사파리, 파이어폭스에선, 이미지맵에 마우스 커서가 올려질 때 centerVisual 에 기본 이미지가 세팅됩니다.고민 고민하다 보니.. 이미지맵에 마우스가 올려지면 top 영역이 아닌 것으로 인식한다..그러고 보니 map 들은 top 밖에 있네요.. top 밖에 있는 map 들을 top 안에 넣으니까 크롬 등에서도 정상 작..
크롬에서 유의해야 하는 자바스크립트 IE 에선 정상적으로 작동하는데 크롬에선 오동작 하는 자바스크립트 코드들을 함 모바보자구요. ~. o getYear() 대신 getFullYear() 사용var d1 = new Date(); // alert(d1.getYear()); 해 보면 대략 난감해 집니다. 최신 IE 에서는 크롬과 동일하게 getYear() 하면 이상한 값 넣어짐. ㅋ o 파일 다운로드 받을때 a 태그의 target 설정IE 에선 target 을 _blank 로 하면 새창이 열리면서 해당 파일이 열리는데, 크롬에선 대략 난감해 집니다.크롬에선 target 을 숨어있는 iframe 으로 하면 좋은데, IE 에서 이렇게 하면 대략 난감.다운로드
usemap 사용시 크롬에서 작동하지 않는다면..? 아래 코드를 MS 사의 인터넷익스플로러(Internet Explorer, IE) 에서 실행하면 잘 실행됩니다.그런데, Google 사의 크롬(Chrome) 에서 실행하면..? 작동하지 않습니다. 아래 코드와 같이, 대체로는 map 의 name 과 id 를 동일한 명칭으로 세팅하는데..누군가가 이걸 다르게 세팅해서 우연치 않게 발견했네요. ~. 어떻게 보면 usemap 에서 '#' 을 사용하기 때문에 map 태그의 id 에 기재된 "idMap" 이 작동할 것같지만,usemap="#nameMap" 과 같이 해야 map 태그 하위 태그인 area 의 href 에 기술된 내용이 작동합니다.이것이 조금 이상하다구요..? jquery 등의 툴을 사용하는 경우, id 에 '#' 을 class 에 '.' 를 사용하는 ..
크롬 Chrome 웹브라우저에서 플래시 Flash 를 2개 이상 사용시 정상적으로 보이려면.. iframe 을 사용하는 방법 밖에는 없네요..투명한 플래시를 겹쳐 사용하는 경우, iframe 도 투명하게 세팅하면 됩니다. ~. 그런데, 황당한 것은.. 크롬도 어떤 때는 iframe 없이 한 화면에 여러개의 플래시를 사용해도 멀쩡히 잘 나올 때가 있다는 겁니다.그리고, 어느 순간 또 제대로 안 나오고.. 이거 PC 가 이상한 것인지, 크롬 마이너 업데이트를 통해 코드가 약간씩 바뀌는 것인지.. ㅠ. 기본이 되는 플래시는 a.jsp 에 담고,a.jsp 안에 iframe 코드를 b.jsp, c.jsp 등으로 포함시켜서,b.jsp 나 c.jsp 에는 다시 플래시 코드를 넣고.. 이렇게 하면 2개 이상도 크롬에서 정상적으로 보입니다. ~. 플래시에 링크가 걸리는 경우, top.location.href 을 ..
인터넷 익스플로러(IE) 에서 이미지를 둘러싼 태그의 여백에 영향을 주는 요소 예를들어 아래와 같은 HTML 코드가 있다고 할 때, DOCTYPE 이 세팅된 경우라면 생각하는 대로 표시되는데 DOCTYPE 이 없다면..?Box 모델을 생각해 볼때, padding 과 margin 을 고려해 볼 수 있는데..padding 은 IE 와 Chrome 등에서 유효하지만, margin 의 경우 상하는 값을 주어도 적용이 되지 않고 좌우만 수치 조정이 가능.다음으로 생각해 볼 것은 line-height.. 그런데도 이미지 상하에 여백이 발생한다면 font-size 를 조정해 보세요.물론, 이미지에는 적용할 필요 없고, 이미지를 감싸는 태그에 적용하면 됩니다. .........
반응형웹 툴, 미디어 쿼리, 모더나이저, 리스폰드 - http://k7620702.com/13, 기본 설명 - http://www.biew.co.kr/26, 반영형웹 체크사항 - 각 기기들에서 사용될만한 미디어 쿼리 샘플http://nmsdvid.com/snippets/ - A JavaScript library that detects HTML5 and CSS3 features in the user’s browser http://modernizr.com/ 2013.04.09 현재 2.6.2 ver - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) https://github.com/scottjehl/Respond - IE 에서 미디어 쿼리 작동..
IE에선 보이는데, 크롬에서 배경이미지가 안 보이는 현상 ... ... ... 상기 코드로 작성되었는데, 이것이 MS 사의 인터넷 익스플로러(이하 IE)에서는 제대로 이미지가 보이는데..크롬에선 안 보인다며 해결 의뢰가 들어왔습니다. 자, 이리저리 해 보았으나 원인을 잘 모르겠는거에요.최초 작업자가 HTML 과 CSS 를 한 두 해 하는 것도 아니고, 나도 꽤나 오랜 세월 작업을 해 왔지만..도저히 모르겠는거라.. ㅠ. 그래서 마지막으로, li 하나에 style="background:url('...') left top" 해 보니..짜잔, 크롬에서도 IE 에서도 정상적으로 보이는겁니다.아하.. class 이름으로 사용한 01, 02, 03 등이 문제.class 이름은 숫자로 시작하면 안 된다는 전제가 있었는데, 가장 기본적인 것을 까먹은거에요.30분 동안 뭔 짓..
[모음글] 자바스크립트, 자바, Oracle replaceAll - split 과 join 함수를 사용하는 방법. 가장 맘에 드는 방법.. ~. http://www.9f.co.kr/bbs/board.php?bo_table=data04&wr_id=38 문자열에서 특정 단어에 태그를 넣을때 -> var tag = '...'; $(this).html().split(tag).join('' +tag+ '') - replace 함수와 표현식을 사용하는 방법. http://blog.naver.com/bluemoonlk?Redirect=Log&logNo=110134372966 var tag = '...'; $(this).html().replace(new RegExp(tag, 'g'), '' +tag+ ''); - 루프를 사용하는 방법.. 소스가 길어지네요.. http://blog...

티스토리툴바