html - para - lista de codigos css
Insertar un enlace usando CSS (6)
No creo que sea posible con CSS. Se supone que CSS solo afecta el aspecto y el diseño de tu contenido.
Esto parece un trabajo para un script PHP (o algún otro lenguaje). No me diste suficiente información para saber la mejor manera de hacerlo, pero tal vez algo como esto:
function case_link($id) {
return ''<a href="http://bugs.example.com/fogbuz/default.php?'' . $id . ''">'' . $id . ''</a>'';
}
Luego, más adelante en su documento:
<table><tr><td class="case"><?php echo case_link(''123456''); ?></td></tr></table>
Y si quiere un archivo .html, simplemente ejecute el script desde la línea de comando y redirija el resultado a un archivo .html.
Estoy manteniendo a mano un documento HTML, y estoy buscando una forma de insertar automáticamente un enlace alrededor del texto en una tabla. Déjame ilustrar:
<table><tr><td class="case">123456</td></tr></table>
Me gustaría convertir automáticamente cada texto en un TD con "caso" de clase en un enlace a ese caso en nuestro sistema de seguimiento de errores (que, dicho sea de paso, es FogBugz).
Entonces me gustaría que "123456" se cambie a un enlace de esta forma:
<a href="http://bugs.example.com/fogbugz/default.php?123456">123456</a>
¿Es eso posible? He jugado con los pseudo-elementos: before y: after, pero no parece haber una manera de repetir el número de caso.
No de una manera que funcione en todos los navegadores. Sin embargo, podrías hacer eso con un Javascript relativamente trivial.
function makeCasesClickable(){
var cells = document.getElementsByTagName(''td'')
for (var i = 0, cell; cell = cells[i]; i++){
if (cell.className != ''case'') continue
var caseId = cell.innerHTML
cell.innerHTML = ''''
var link = document.createElement(''a'')
link.href = ''http://bugs.example.com/fogbugz/default.php?'' + caseId
link.appendChild(document.createTextNode(caseId))
cell.appendChild(link)
}
}
Puede aplicarlo con algo como onload = makeCasesClickable , o simplemente incluirlo justo al final de la página.
No es posible con CSS, además de que no es lo que CSS es de ninguna manera. El lado del cliente de Javascript o del lado del servidor (inserte el idioma de su elección) es el camino a seguir.
Aquí hay una solución jQuery específica para su HTML publicada:
$(''.case'').each(function() {
var link = $(this).html();
$(this).contents().wrap(''<a href="example.com/script.php?id=''+link+''"></a>'');
});
en esencia, sobre cada elemento .case, tomará los contenidos del elemento y los arrojará en un enlace envuelto alrededor de él.
Podrías tener algo así (usando Javascript). Dentro de <head> , tiene
<script type="text/javascript" language="javascript">
function getElementsByClass (className) {
var all = document.all ? document.all :
document.getElementsByTagName(''*'');
var elements = new Array();
for (var i = 0; i < all.length; i++)
if (all[i].className == className)
elements[elements.length] = all[i];
return elements;
}
function makeLinks(className, url) {
nodes = getElementsByClass(className);
for(var i = 0; i < nodes.length; i++) {
node = nodes[i];
text = node.innerHTML
node.innerHTML = ''<a href="'' + url + text + ''">'' + text + ''</a>'';
}
}
</script>
Y luego al final de <body>
<script type="text/javascript" language="javascript">
makeLinks("case", "http://bugs.example.com/fogbugz/default.php?");
</script>
Lo probé y funciona bien.
Sé que esta es una vieja pregunta, pero me encontré con esta publicación en busca de una solución para crear hipervínculos usando CSS y terminé haciendo la mía, podría ser de interés para alguien al encontrar esta pregunta como lo hice:
Aquí hay una función php llamada ''linker ();'' que habilita un atributo CSS falso
connect: ''url.com'';
para un elemento definido #id. simplemente deje que el php lo llame en cada elemento de HTML que considere valioso. las entradas son el archivo .css como una cadena , usando:
$ style_cont = file_get_contents ($ style_path);
y el #id del artículo correspondiente. Aquí está todo:
function linker($style_cont, $id_html){
if (strpos($style_cont,''connect:'') !== false) {
$url;
$id_final;
$id_outer = ''#''.$id_html;
$id_loc = strpos($style_cont,$id_outer);
$connect_loc = strpos($style_cont,''connect:'', $id_loc);
$next_single_quote = stripos($style_cont,"''", $connect_loc);
$next_double_quote = stripos($style_cont,''"'', $connect_loc);
if($connect_loc < $next_single_quote)
{
$link_start = $next_single_quote +1;
$last_single_quote = stripos($style_cont, "''", $link_start);
$link_end = $last_single_quote;
$link_size = $link_end - $link_start;
$url = substr($style_cont, $link_start, $link_size);
}
else
{
$link_start = $next_double_quote +1;
$last_double_quote = stripos($style_cont, ''"'', $link_start);
$link_end = $last_double_quote;
$link_size = $link_end - $link_start;
$url = substr($style_cont, $link_start, $link_size); //link!
}
$connect_loc_rev = (strlen($style_cont) - $connect_loc) * -1;
$id_start = strrpos($style_cont, ''#'', $connect_loc_rev);
$id_end = strpos($style_cont,''{'', $id_start);
$id_size = $id_end - $id_start;
$id_raw = substr($style_cont, $id_start, $id_size);
$id_clean = rtrim($id_raw); //id!
if (strpos($url,''http://'') !== false)
{
$url_clean = $url;
}
else
{
$url_clean = ''http://''.$url;
};
if($id_clean[0] == ''#'')
{
$id_final = $id_clean;
if($id_outer == $id_final)
{
echo ''<a href="'';
echo $url_clean;
echo ''" target="_blank">'';
};
};
};
};
esto probablemente podría mejorarse / acortarse usando comandos como .wrap () o getelementbyID () porque solo genera la porción <a href=''blah''> , pero ver como </a> desaparece de todos modos sin una cláusula de apertura todavía funciona si simplemente agrégalos a todos lados: D