이미지에 빨간색 점과 제목을 추가하십시오.

사진이있는 html 페이지가 있는데 사용자가 이미지를 클릭하여 빨간색 점과 빨간색 점에 제목을 추가 할 수 있도록하고 싶습니다. 점들을 추가 한 후에 그는 그것을 저장하거나 인쇄 할 수 있어야합니다.이미지에 빨간색 점과 제목을 추가하십시오.

레일즈, html, css 및 (또는없이) 자바 스크립트에서 이것을 구현하는 가장 좋은 방법은 무엇입니까?

출처

2009-09-02 Beffa

는 점은 일을 표시 할 수 있어야하고 있습니까? 페이 스북이 가지고있는 것처럼 또는 무엇인가? – Thomaschaaf

예 도트로 표시해야 함 – Beffa

아주 간단하게 말해서 사용자가 클릭 할 때마다 <div style="position: relative; top: ?px; left: ?px"><img src="red dot.jpg">Dot title</div>을 넣었습니다. 트리거를 수행 할 백그라운드에서 onclick 이벤트가 있고 여기에 how to get the Cursor Position입니다.

position: relative 전체가 <div> 블록 내에 있다고 가정합니다. document.createElement과 appendChild을 보시면 도움이됩니다.

사용자가 서버에서 수행하는 작업을 디스패치하기 위해 플로팅을 저장하고 싶을 수도 있습니다.

출처

2009-09-02 06:49:23 Havenard

function paint_dot (e, comment) { pitch = document.getElementById ("pitch"); div = document.createElement ("div"); dot_title = document.createTextNode (주석); div.appendChild (dot_title); style = document.createAttribute ("style"); 커서 = getPosition (e) 스타일.왼쪽 : "+ cursor.x +"px; 배경 : url (dot.png) 반복 없음, 왼쪽 패딩 : 10px; "; div.setAttributeNode (style); pitch.appendChild (div); //paint_dot(self.event); } – Beffa

사진 갤러리를 보여주고 인쇄하거나 저장할 사진을 선택해야합니까?

이미지 테이블을 양식에 포함시키고 확인란을 사용하여 선택하는 것이 더 쉽습니다.

출처

2009-09-02 06:49:00 pavium

하나의 가능성은 다음과 같습니다

는
가 jQuery로 클릭 이벤트 처리 레일과 이미지가 포함 된 뷰를 생성합니다.
사용자가 제목을 묻는 자바 스크립트 대화 상자를 표시 할 때
사용자가 확인을 클릭하면 응용 프로그램에 새 점에 대해 알리는 Ajax 요청을 Rails 컨트롤러로 보냅니다.
그런 다음 컨트롤러는 해당 정보를 데이터베이스 또는 세션에 추가하고 그림을 업데이트해야합니다. 예를 들어 실제로 ImageMagick과 같은 일부 이미지 라이브러리와 함께 점을 추가해야합니다.
그런 다음 Ajax 요청이 완료된 후 그림을 다시로드하십시오.

출처

2009-09-02 06:50:16

서버로의 왕복을 줄이려면 이미지에서 점과 제목을 브라우저에서 직접 그립니다.

HTML5 <canvas> 요소, SVG 또는 Flash 등으로 구현할 수 있습니다. Canvas는 브라우저 지원 기능이 뛰어납니다.

출처

2009-09-02 07:03:21 bucabay

CSS를 사용하여 만들 수 있습니다.

<div class="image"> 
    <div class="permalink"><a href="#">Click here.</a></div> 
    <img src="#" /> 
</div>

그런 다음, 당신의 CSS는 다음과 같아야합니다

.image .permalink { display: none; position: absolute; top: 0px; left: 0px; } 
.image:hover .permalink { display: block; } 
.image .permalink { background: url(red-dot.gif) no-repeat; }

출처

2009-09-02 11:49:54

이미지에 빨간색 점과 제목을 추가하십시오.

답변

관련 문제