Imatge amb diferents paraules amb links personalitzats

Imatge amb diferents paraules amb links personalitzats

per VICENTE PASTOR MARZO -
Nombre de respostes: 11

Bon dia,

Des del centre estem pensant fer un cartell per portes obertes i voldríem posar diferents imatges al cartell i que fent clic a cada imatge aquesta et portes a una pàgina externa de la pàgina web.

És possible fer-ho amb Nodes? 

En cas que no fos possible, ho podríem fer inserint diverses imatges en l'article i que cadascuna ens portés a un enllaç extern??

L'únic que he pogut fer es que al fer clic a la imatge em porti a una pàgina de la web, però no a un enllaç extern.

Moltes gràcies!

En resposta a VICENTE PASTOR MARZO

Re: Imatge amb diferents paraules amb links personalitzats

per FRANCESC BUSQUETS BURGUERA -
Podeu fer servir aquesta eina gratuïta: https://www.image-map.net/

Els passos a seguir serien:

1 - Pugeu la imatge a la mediateca del Nodes i copieu l'adreça "https" que surt quan fas clic damunt seu, al camp "URL".

2 - Aneu a https://www.image-map.net/ i feu clic a "Load image from web site". Enganxeu-hi l'adreça que heu copiat en el pas anterior.

3 - Aneu definint les àrees (rectangles, cercles o polígons), indicant l'enllaç on han d'apuntar, el títol de cada zona i si l'enllaç s'ha d'obrir en una pestanya nova (target "_blank"). Per ajustar la posició de cada àrea feu clic al botó "active", després un clic damunt la imatge i arrossegar els punts o la zona sencera.

4 - Quan hagueu acabat, feu clic a "Show me the code!", copieu el codi que us mostra i enganxeu-lo a l'article o a la pàgina on vulgueu que aparegui, posant l'editor en modalitat "text" (pestanyeta de la dreta que permet alternar entre "text" i "visual").

Espero que funcioni!

En resposta a FRANCESC BUSQUETS BURGUERA

Re: Imatge amb diferents paraules amb links personalitzats

per VICENTE PASTOR MARZO -
Hola Francesc,

He fet els passos tal i com m'indiques i no hi ha manera de que en la imatge que surt l'article una vegada inserit el codi en la modalitat "text" surti per clicar on he fet les àrees per anar als diferents enllaços.

Alguna altra opció??

Moltes gràcies!
En resposta a VICENTE PASTOR MARZO

Re: Imatge amb diferents paraules amb links personalitzats

per MONICA GRAU PRIETO -
Hola, Vicente,
a mi també m'ha passat com a tu, si ens passes l'enllaç a l'article mirem on pot ser el problema. En el meu cas crec que era que primer definia URL, title i destí i al final la forma. Prova a veure si aquest és també el teu problema.

Fins ara,
En resposta a MONICA GRAU PRIETO

Re: Imatge amb diferents paraules amb links personalitzats

per VICENTE PASTOR MARZO -
Hola Monica,

et passo l'enllaç a l'article... no el tinc publicat per no portar a confusions... no sé si tenint-lo en esborrany podràs accedir...

https://agora.xtec.cat/inspicdelvent/?p=2941&preview=true

Et passo també captura de pantalla que em surt quan vaig a generar el codi per copiar-lo. Veuràs que hem surt el símbol de prohibit però no sé si és correcte o no....

Fitxer adjunt imatge.jpg
En resposta a MONICA GRAU PRIETO

Re: Imatge amb diferents paraules amb links personalitzats

per VICENTE PASTOR MARZO -
Hola Mónica,

He estat fent proves i no sé com fer-ho... així que et passo l'article penjat a la web ja que he vist que en esborrany no el podies veure.

http://agora.xtec.cat/inspicdelvent/portada/portes-obertes-2021/

A veure si hem pots ajudar.

Moltes gràcies
En resposta a VICENTE PASTOR MARZO

Re: Imatge amb diferents paraules amb links personalitzats

per MONICA GRAU PRIETO -

Bon dia,
és possible que la imatge en ser tan gran i mostrar-se més petita al Nodes les coordenades quedessin mal ubicades. Hem pujat una nova versió de la imatge al vostre Nodes que fa 800x600px i us hem deixat els enllaços preparats perquè els pugueu substituir (els marquem en negreta). Una altra cosa a tenir en compte és que quan poseu codi HTML a la pestanya Text, no canvieu a la pestanya Visual ja que el Wordpress pot modificar el codi.

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://agora.xtec.cat/inspicdelvent/wp-content/uploads/usu365/2021/02/Cartell-portes-obertes-2021-1024x724-1.jpg" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="Inscriu-te" title="Inscriu-te" href="https://forms.gle/noVcAfcwCDbrJRG7A" coords="113,288,351,328" shape="rect">
    <area target="_blank" alt="Visita'ns" title="Visita'ns" href="https://drive.google.com/file/d/1Gx-PSolvI_vRkdCuG-v342okp2GySne7/view" coords="71,358,211,490" shape="rect">
    <area target="_blank" alt="Què fem?" title="Què fem?" href="https://urlquefem" coords="244,386,384,520" shape="rect">
    <area target="_blank" alt="Informació general" title="Informació general" href="https://urlinformacio" coords="392,321,562,492" shape="rect">
    <area target="_blank" alt="Més activitats" title="Més activitats" href="https://urlmesactivitats" coords="591,371,730,517" shape="rect">
</map>

Fins ara,
Mònica

En resposta a MONICA GRAU PRIETO

Re: Imatge amb diferents paraules amb links personalitzats

per VICENTE PASTOR MARZO -
Moltes gràcies Mónica.

Vaig reduir la mida de la imatge però no tant.

Salutacions,

Vicent
En resposta a VICENTE PASTOR MARZO

Re: Imatge amb diferents paraules amb links personalitzats

per ROSA M. OBRADORS PUIGDELLIVOL -
Hola,
Estava fent una prova. He trobat molt interessant poder permetre diferents links en una imatge.
He creat una imatge reduïda (897px x 190 px) amb tres enllaços a articles del web. Si ho visualitzo a l'ordinador funciona però en el mòbil no, no respecta les àrees marcades. No acaba de funcionar... A part de la mida, caldria separar els enllaços del codi generat?
https://agora.xtec.cat/ceip-montserrat-suria/general/links-dins-imatge/

Fins aviat,
Rosa


En resposta a ROSA M. OBRADORS PUIGDELLIVOL

Re: Imatge amb diferents paraules amb links personalitzats

per MONICA GRAU PRIETO -
Hola, Rosa,
aquests tipus d'imatges, com estàs definint una àrea amb coordenades fa que en els telèfons o pantalles petites no es vegi correctament en ser un espai molt més petit.
En l'exemple que adjuntes, jo faria 3 imatges individuals cadascuna amb el seu enllaç, no faria servir un mapa d'imatge.

També pots provar a fer botons amb la caixa d'eines de Nodes que trobaràs en aquest enllaç: https://jmeler.github.io/nodes-tools/simple-button.html

Fins ara,
Mònica
En resposta a MONICA GRAU PRIETO

Re: Imatge amb diferents paraules amb links personalitzats

per ROSA M. OBRADORS PUIGDELLIVOL -
Moltes gràcies Mònica.
Els botons són una bona eina. Segur que els utilitzarem.

També hem provat un altra mapa d'imatges que va perfectament amb l'ordinador però amb el mòbil (almenys amb els que hem provat) no funciona. Deu ser perquè la pantalla del mòbil és massa petita. Envio l'enllaç de la prova:
https://agora.xtec.cat/ceip-montserrat-suria/curs-2020-21/coneix-la-nostra-escola/

Hi ha alguna altra opció per aconseguir l'efecte del mapa d'imatges que funcioni amb el mòbil?

Fins aviat,
Rosa

En resposta a ROSA M. OBRADORS PUIGDELLIVOL

Re: Imatge amb diferents paraules amb links personalitzats

per MONICA GRAU PRIETO -
Hola, Rosa,
malauradament no és possible. Si la imatge fos molt petita segurament funcionaria però en ser una imatge pensada per visualitzar en pantalles d'ordinador, ara mateix no és possible fer que també funcioni amb telèfons mòbils dins de Nodes.

Fins ara,
Mònica