10/10/2018, 09:49

Hỏi về tooltip tự động link vào text

Vấn đề của em nó như thế này :-s.
Em thì mù lập trình , bữa nhờ thằng bạn viết giùm cái site. Nay cần thay đổi thêm thắt 1 số thứ cho nó màu mè 1 tí. Nhưng do mù lập trình toàn tập nên đành vác xác lên đây hỏi các cao thủ.

Vấn đề của em nó như thế này ạ .
Site em là http://chemgio.vn .
Viết = php , nhưng ko có database và cũng khá đơn giản, dễ chỉnh sửa thêm thắt.

Giờ em gặp vấn đề là thế này. Site em là site truyện tranh, mỗi truyện đều có thể loại riêng.
Ví dụ: http://www.chemgio.vn/Conan/


Thì ngay cái dòng
Thể loại: Comedy, drama, detective fiction
Mấy cái "Comedy, drama, detective fiction" chính là categori của nó.

Mà nhiều bộ truyện, có nhiều thể loại trùng nhau, ví dụ khách muốn tìm các truyện thể loại "Comedy" thì biết làm thế nào :-s ?
Mà site em lại ko có database, nó gần như là làm thủ công toàn tập =.=!, nên không thể tạo categori liên kết với nhau dc.

Vì vậy em nảy ra ý tưởng làm 1 cái blog.... http://www.vinablogger.com , post info các bộ truyện và categori của nó, blog làm bằng blogspot , và phân chia categori khá good.

Việc em cần làm giờ, là link các chữ Comedy, drama, detective fiction ..... trong site http://www.chemgio.vn sang http://www.vinablogger.com

Ví dụ link chữ "Comedy" bên http://www.chemgio.vn sang http://www.vinablogger.com/search/label/comedy chẳng hạn.

Nhưng như em đã nói, site em gần như là edit thủ công, giờ chả lẽ ngồi edit và thêm Categori vào hơn 200 bộ truyện = hơn 200 file.php ???

Cái duy nhất mà em có thể chỉnh hàng loạt là sửa file header và footer ~.~

Rồi em nghe loáng thoáng đến tooltip, nhưng search nát google vẫn chỉ tìm ra các loại tooltip phải edit thủ công bằng tay . Thấy có người bảo, vẫn có cách để tooltip tự động link vào những kí tự mà mình đã chọn sẵn, nhưng cần css và ajax. Định hỏi thêm , nhưng pác ấy nói ko có thời gian để chỉ.

Vậy nên em đành lên đây lập topic hỏi các cao thủ, mong mọi người giúp đỡ.

Đừng cười vì kiến thức nông cạn của em nhé. Newbie mà ~_~

temp2 viết 11:59 ngày 10/10/2018
JavaScript Link Tooltips
đóivl viết 11:59 ngày 10/10/2018
Dạ, cảm ơn pác đã hỗ trợ , nhưng hình như cái này vẫn phải edit bằng tay từng cái một hả pác ?

Ý em muốn là làm cách nào chỉ cần liệt kê các từ khoá, là tooltip tự động link vào mà ko cần mình can thiệp ý ạ
ruckus viết 11:59 ngày 10/10/2018
Xí cho hỏi ngoài lề chút. Như vậy là site của bạn là tĩnh, vậy hà cớ gì phải sử dụng php ??? Nếu ko có database thì dùng tạm bằng xml ???
đóivl viết 11:56 ngày 10/10/2018
Dạ cụ thể là thế này ạ.
Ví dụ như trên ddth, chỉ cần ai đó viết bài có chữ lập trình hay máy tính là nó lập tức tự động link đến site mua từ khoá đó trên ddth.


Và cái em cần mọi người giúp là có thể làm 1 cái tooltip mà nó sẽ tự động link vào các từ khoá mà em chọn, như "Comedy, Ecchi"....v.v
Site em là site tĩnh, viết = php và không có database , đa số đều phải edit = tay, chỉ có mỗi file header và footer là khi edit sẽ tác động hàng loạt đến các trang khác được thôi.

Em nghe ông bạn nói dùng tooltip, có cách để nó tự động link vào những từ khoá mình muốn, nhưng cần 1 hỗn hợp ajax, css, js....

Em dốt văn và mù tịt về lập trình nên em viết hơi tối nghĩa, các pác chịu khó đọc kĩ , từ từ chậm chậm là hiểu ý em liền hà :-s .

Mong mọi người thông cảm, tại em ít học nên khá dốt nát . Hi vọng mọi người gắng giúp em cái vấn đề này ~_~ .
khuongCOMPUTER viết 11:51 ngày 10/10/2018
Chắc là món giống cái in line text-link-ads chứ gì?
alone_hero viết 12:02 ngày 10/10/2018
Được gửi bởi đóivl
Dạ cụ thể là thế này ạ.
Ví dụ như trên ddth, chỉ cần ai đó viết bài có chữ lập trình hay máy tính là nó lập tức tự động link đến site mua từ khoá đó trên ddth.


Và cái em cần mọi người giúp là có thể làm 1 cái tooltip mà nó sẽ tự động link vào các từ khoá mà em chọn, như "Comedy, Ecchi"....v.v
Site em là site tĩnh, viết = php và không có database , đa số đều phải edit = tay, chỉ có mỗi file header và footer là khi edit sẽ tác động hàng loạt đến các trang khác được thôi.

Em nghe ông bạn nói dùng tooltip, có cách để nó tự động link vào những từ khoá mình muốn, nhưng cần 1 hỗn hợp ajax, css, js....

Em dốt văn và mù tịt về lập trình nên em viết hơi tối nghĩa, các pác chịu khó đọc kĩ , từ từ chậm chậm là hiểu ý em liền hà :-s .

Mong mọi người thông cảm, tại em ít học nên khá dốt nát . Hi vọng mọi người gắng giúp em cái vấn đề này ~_~ .
mình hiểu rồi, nhưng báo tin buồn cho bạn muốn làm vậy kiểu gì cũng vẫn phải hiểu biết về lập trình mới làm được, theo mình nguyên tắc nó thế này.

1. danh sách "từ khóa", "thông tin tooltip" được lưu lại có thể bằng nhiều cách, xml, array, database,....
2. xuất dữ liệu content ra web, trên web thì đó là các thông tin nội dung trường dữ liệu mình lấy ví dụ nó có tên là noidung.content chẳng hạn người ta tùy ngôn ngữ để xuất(<?php echo noidung.content ?> hoặc <% Response.write(noidung.content) %>
3. Nhưng vì cần gắn link tooltip nên phải thay thế từ khóa xuất ra như sau, bạn biết lập trình sẽ hiểu ngay, ở đây ví dụ thay từ khóa máy tính nhé:

<% Response.write(Replace(noidung.content,"maytinh"," <span style='text-decoration: underline; border-bottom-style: solid; border-bottom-width: 1px;' id='link12' class='VClickTextLink'>máy tính</span> ")) %>

<%
For i = 1 to n (n là số lượng từ khóa)
Response.write(Replace(noidung.content,keyword(i), "<span style='text-decoration: underline; border-bottom-style: solid; border-bottom-width: 1px;' id='link12' class='VClickTextLink'>"& keyword(i) &"</span> "))
Next
%>

Trên chỉ là giải thuật thôi nhé
đóivl viết 12:04 ngày 10/10/2018
Cảm ơn pác alone_hero đã chỉ cho em con đường sáng , em sẽ bắt đầu tìm hiểu từ những cái pác gợi ý .
Chân thành cảm ơn mọi người rất nhìu ^^
khuongCOMPUTER viết 11:58 ngày 10/10/2018
Được gửi bởi alone_hero
mình hiểu rồi, nhưng báo tin buồn cho bạn muốn làm vậy kiểu gì cũng vẫn phải hiểu biết về lập trình mới làm được, theo mình nguyên tắc nó thế này.

1. danh sách "từ khóa", "thông tin tooltip" được lưu lại có thể bằng nhiều cách, xml, array, database,....
2. xuất dữ liệu content ra web, trên web thì đó là các thông tin nội dung trường dữ liệu mình lấy ví dụ nó có tên là noidung.content chẳng hạn người ta tùy ngôn ngữ để xuất(<?php echo noidung.content ?> hoặc <% Response.write(noidung.content) %>
3. Nhưng vì cần gắn link tooltip nên phải thay thế từ khóa xuất ra như sau, bạn biết lập trình sẽ hiểu ngay, ở đây ví dụ thay từ khóa máy tính nhé:

Trên chỉ là giải thuật thôi nhé
Dùng Javascript làm được, mà còn hiệu suất cao hơn nữa á.

Code:
/* 
  linkWord(obj)
  written by Christian Heilmann (http://wait-till-i.com)
  automatically turns words defined in the object obj into 
  hyperlink. 
  The object obj sent as a paramater needs to contain all the words
  properties and the associated URLs as values.
  Demo object: 
  {
    'wait-till-i.com':'http://wait-till-i.com',
    'icant.co.uk':'http://icant.co.uk'
  }
*/
<script type="text/javascript">
	function link(obj){
		for(i in obj){
			var x = document.body.innerHTML;
			var linkStart = '<a href="'+obj[i]+'">';	
			var linkEnd = '</a>';	
			var reg = new RegExp ('\\b' + i + '\\b','g');
			x = x.replace(reg, linkStart + i + linkEnd);
			document.body.innerHTML = x;
		}
	}

	function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
	addLoadEvent(function(){link({'example':'http://www.example.com','another':'http://chauthanh.info/'})});
	</script>
<body>
another example
</body>
Save thành file html và chạy thử là thấy kết quả ngay.
đóivl viết 12:00 ngày 10/10/2018
Được gửi bởi khuongCOMPUTER
Dùng Javascript làm được, mà còn hiệu suất cao hơn nữa á.

Code:
/* 
  linkWord(obj)
  written by Christian Heilmann (http://wait-till-i.com)
  automatically turns words defined in the object obj into 
  hyperlink. 
  The object obj sent as a paramater needs to contain all the words
  properties and the associated URLs as values.
  Demo object: 
  {
    'wait-till-i.com':'http://wait-till-i.com',
    'icant.co.uk':'http://icant.co.uk'
  }
*/
<script type="text/javascript">
	function link(obj){
		for(i in obj){
			var x = document.body.innerHTML;
			var linkStart = '<a href="'+obj[i]+'">';	
			var linkEnd = '</a>';	
			var reg = new RegExp ('\\b' + i + '\\b','g');
			x = x.replace(reg, linkStart + i + linkEnd);
			document.body.innerHTML = x;
		}
	}

	function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
	addLoadEvent(function(){link({'example':'http://www.example.com','another':'http://chauthanh.info/'})});
	</script>
<body>
another example
</body>
Save thành file html và chạy thử là thấy kết quả ngay.
Cảm động đến suýt khóc , đúng là cái em đang cần tìm.... cảm ơn pác nhiều lắm ạ .....:x

Được gửi bởi dohoa911
nguyên tắc là như nhau mà bạn, bạn "đóivl" vẫn phải biết chút về lập trình mới có thể tùy biến kết quả để ra được theo ý bạn ấy.
hì, em mù tịt lập trình, chỉ biết mỗi html, mỗi lần muốn thêm thắt sửa code của người ta là ngồi mò cả buổi mò lung tung trúng tè le ý mà .... lỡ hư thì..... ngồi mếu.. ^^!.

Cảm ơn mọi người rất nhiều ^_^, lúc đầu em cứ tưởng newbie như em lập topic kiểu này là ăn chửi te tua luôn chứ , ko ngờ được mọi người suport nhiệt tình quá .

Chúc tất cả sức khoẻ và thành công với website của mình
Bài liên quan
0