menu activé par un elem du contenu
Bonjour,
Je cherche a faire quelque chose d'un peu bizarre.
J'ai créé un menu maximenu vertical, a coté de ca j'ai ma page avec mon contenu.
J'aimerais que lors du passage de la souris sur un des éléments du contenu (une div ou une image) la ligne du menu correspondant passe en "survolé" (cad passe en colorisé).
J'ai commencé a chercher une solution avec la fonction onmouseover mais je ne sait pas quoi appeler.
Je voudrait appeler le menu en hover grace au onmouseover et le repasser en non actif avec le onmouseout.
Serait il possible d'avoir la direction a suivre. (Que dois je appeler, comment...)
Merci d'avance
Je cherche a faire quelque chose d'un peu bizarre.
J'ai créé un menu maximenu vertical, a coté de ca j'ai ma page avec mon contenu.
J'aimerais que lors du passage de la souris sur un des éléments du contenu (une div ou une image) la ligne du menu correspondant passe en "survolé" (cad passe en colorisé).
J'ai commencé a chercher une solution avec la fonction onmouseover mais je ne sait pas quoi appeler.
Je voudrait appeler le menu en hover grace au onmouseover et le repasser en non actif avec le onmouseout.
Serait il possible d'avoir la direction a suivre. (Que dois je appeler, comment...)
Merci d'avance
by MDF73
Please Log in or Create an account to join the conversation.
J'ai réussi a trouver un début de réponse avec ce code
<script>
function ChangeColorRose(element)
{
element.style.background='#ab2166'
element.style.color='#FFFFFF'
}
function ChangeColorBlanc(element)
{
element.style.background='#ffffff'
element.style.color='#000000'
}
</script>
<div class="art-layout-cell layout-item-2"
onclick="window.location='index.php/diagnostic-medical'" onmouseover="ChangeColorRose(document.getElementsByClassName('item136')[0])" onmouseout="ChangeColorBlanc(document.getElementsByClassName('item136')[0])"
style="width: 34%; cursor: pointer;">
Cela permet de changer le background de l'élément du menu au passage de la souris sur la div du contenu.
En revanche, la couleur du texte ne fonctionne pas... et cela colorise la div en entiere.
PS: j'utilise le style Blank de maximenu
Des idées?? :whistle:
<script>
function ChangeColorRose(element)
{
element.style.background='#ab2166'
element.style.color='#FFFFFF'
}
function ChangeColorBlanc(element)
{
element.style.background='#ffffff'
element.style.color='#000000'
}
</script>
<div class="art-layout-cell layout-item-2"
onclick="window.location='index.php/diagnostic-medical'" onmouseover="ChangeColorRose(document.getElementsByClassName('item136')[0])" onmouseout="ChangeColorBlanc(document.getElementsByClassName('item136')[0])"
style="width: 34%; cursor: pointer;">
Cela permet de changer le background de l'élément du menu au passage de la souris sur la div du contenu.
En revanche, la couleur du texte ne fonctionne pas... et cela colorise la div en entiere.
PS: j'utilise le style Blank de maximenu
Des idées?? :whistle:
Last Edit:9 years 2 months ago
by MDF73
Last edit: 9 years 2 months ago by MDF73.
Please Log in or Create an account to join the conversation.
Ca avance ca avance!!
Alors la ca marche presque avec le code suivant:
<script>
var maclasse = ''
function ChangeColorRose(nom)
{
if (maclasse == '')
{
element = document.getElementsByClassName(nom)[0]
maclasse= element.className
element.className='level1' + ' ' + nom
}
}
function ChangeColorBlanc(nom)
{
if (maclasse != '')
{
element = document.getElementsByClassName(nom)[0]
element.className = maclasse
maclasse=''
}
}
</script>
<div class="art-layout-cell layout-item-2"
onclick="window.location='index.php/diagnostic-medical'"
onmouseover="ChangeColorRose('item136')"
onmouseout="ChangeColorBlanc('item136')"
style="width: 34%; cursor: pointer;">
</div>
Avec ce code cela marche presque au seul petit détail que je n'ai pas trouver comment appeler la classe item1:hover.
Des idées?? :silly:
Alors la ca marche presque avec le code suivant:
<script>
var maclasse = ''
function ChangeColorRose(nom)
{
if (maclasse == '')
{
element = document.getElementsByClassName(nom)[0]
maclasse= element.className
element.className='level1' + ' ' + nom
}
}
function ChangeColorBlanc(nom)
{
if (maclasse != '')
{
element = document.getElementsByClassName(nom)[0]
element.className = maclasse
maclasse=''
}
}
</script>
<div class="art-layout-cell layout-item-2"
onclick="window.location='index.php/diagnostic-medical'"
onmouseover="ChangeColorRose('item136')"
onmouseout="ChangeColorBlanc('item136')"
style="width: 34%; cursor: pointer;">
</div>
Avec ce code cela marche presque au seul petit détail que je n'ai pas trouver comment appeler la classe item1:hover.
Des idées?? :silly:
by MDF73
Please Log in or Create an account to join the conversation.
salut
le plus simple est de faire ça en JS effectivement, mais il suffit d'ajouter une classe puis la retirer.Ensuite tu pilotes tous les styles en CSS (fond, couleur de text ...)
si tu as jQuery ou Mootools de chargé ça va être bien plus simple
tu es sous joomla 2.5 ou 3 ?
CEd
le plus simple est de faire ça en JS effectivement, mais il suffit d'ajouter une classe puis la retirer.Ensuite tu pilotes tous les styles en CSS (fond, couleur de text ...)
si tu as jQuery ou Mootools de chargé ça va être bien plus simple
tu es sous joomla 2.5 ou 3 ?
CEd
Joomlack Webmaster and Developer
by ced1870
Please Log in or Create an account to join the conversation.
Bonjour et merci de ta réponse
Je suis sous Joomla 3.
Je ne connais pas JQuery ou Mootools je vais regarder ca de plus près.
J'ai regardé ca ce week end et j'ai trouvé un début de solution avec le code suivant:
LA mon menu passe en survolé au passage de la souris. Le seul soucis c'est que ca ne fait pas la meme chose que le survolé du menu. C'est difficile a expliquer donc je vais mettre des images!
La premiere image survol du menu corrspond a ce que j'obtient quand la souris survol le menu.
La seconde image survol de l'image est ce que j'obltient quand la souris survol l'image.
Merci de ton aide
Je suis sous Joomla 3.
Je ne connais pas JQuery ou Mootools je vais regarder ca de plus près.
J'ai regardé ca ce week end et j'ai trouvé un début de solution avec le code suivant:
Code:
<script>
var maclasse = ''
function ChangeColorRose(nom)
{
if (maclasse == '')
{
element = document.getElementsByClassName(nom)[0]
maclasse= element.className
element.className='level1' + ' ' + nom
}
}
function ChangeColorBlanc(nom)
{
if (maclasse != '')
{
element = document.getElementsByClassName(nom)[0]
element.className = maclasse
maclasse=''
}
}
</script>
<div class="art-layout-cell layout-item-2"
onclick="window.location='index.php/diagnostic-medical'"
onmouseover="ChangeColorRose('item136')"
onmouseout="ChangeColorBlanc('item136')"
style="width: 34%; cursor: pointer;">Entrer
</div>
LA mon menu passe en survolé au passage de la souris. Le seul soucis c'est que ca ne fait pas la meme chose que le survolé du menu. C'est difficile a expliquer donc je vais mettre des images!
La premiere image survol du menu corrspond a ce que j'obtient quand la souris survol le menu.
La seconde image survol de l'image est ce que j'obltient quand la souris survol l'image.
Merci de ton aide
by MDF73
Please Log in or Create an account to join the conversation.
avec joomla 3 tu peux utiliser jQuery et un code dans ce style
et tu styles la classe "toto" en CSS pour obtenir ton rendu
Code:
<div class="art-layout-cell layout-item-2 targetmenuck"
onclick="window.location='index.php/diagnostic-medical'"
onmouseover="jQuery('.item136').addClass('toto')"
onmouseout="jQuery('.item136').removeClass('toto')"
style="width: 34%; cursor: pointer;">Entrer
</div>
Joomlack Webmaster and Developer
by ced1870
Please Log in or Create an account to join the conversation.
Time to create page: 0.730 seconds