How to edit a rollover using a Dreamweaver function.

Report · Aug 01, 2020

Hello, I have a menu using the rollover behavior created using the insert rollover image dialog box. It works fine but now I want to change the rollover image. I cannot find an easy way to do that! The only way I found is to delete and recreate the rollover, or to edit directly inside the code. A solution should be to modify the parameters of the onMouseOver behavior, but impossible to modify the onMouseOver behavior in the corresponding panel (double click on it has no effect) for example. Is existing a solution for that? Thank you

Report · Aug 01, 2020

Hello,

it could be helpful, if you send a link to your website in question.

Hans-Günter

Report · Aug 01, 2020

Hello, thank you for your answer. Here is a link to the website : https://www.podozen.fr

Alain

Report · Aug 01, 2020

Image rollover behaviors don't DO anything on touch screens. Most site visitors today are on mobile, tablet and hybrid devices that have no mouse. No mouse = no rollovers.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 01, 2020

Hello, thank you for your answer, of course, you are right but it is the case of an old web site. We have a project to rebuild the site, but currently, only small changes are requested like changing the color for the text/image for the rollover.
Alain

Report · Aug 01, 2020

Your rollover script appears to be inside a library item. And CSS styled text is much better for web accessibility, search engines and language translators. So I really think it's better to replace images and rollover scripts with real text links.

Step #1 Replace everything inside your Library Item with this markup.

<table id="nav" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td width="38">&nbsp;</td>
<td width="124"><a href="index.html">Retour &agrave; l'accueil"</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="definition.html">La r&eacute;flexologie</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="origines.html">Les Origines de la R&eacute;flexologie</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="bienfaits.html">Les Bienfaits de la R&eacute;flexologie</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="seances.html">D&eacute;roulement d'une S&eacute;ance</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="activite.html">Description de mon activit&eacute;</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td height="15"></td>
<td><a href="tarifs.html" >Consultez les tarifs</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="temoignages.html">Quelques T&eacute;moignages</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td height="15"></td>
<td><a href="liens.html">Mes meilleurs liens</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="contact.php">Pour me joindre</a></td>
</tr>
</table>

Step #2 Add the following CSS code to your document's <head> tag.

<style>
#nav a {
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-size: 12px;
text-decoration:none;
color:#FFF; 
background: teal;
padding:2%;
display:block;
text-align: center
}
#nav a:visited {color:silver}

#nav a:hover,
#nav a:active,
#nav a:focus {color:gold}
</style>

Feel free to adjust styles and link text.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 01, 2020

Below is an example of a modern navigation menu that is mobile & tablet-friendly.

Horizontal on medium & large devices

Vertical on small devices

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Navbar with Brand </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>

<body>
<nav class="navbar navbar-expand-md navbar-dark bg-secondary">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mynavbar" aria-controls="mynavbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<!--BRAND/LOGO here--> 
<a class="navbar-brand" href="#"><img src="https://dummyimage.com/300x65" alt="logo"></a>

<div class="collapse navbar-collapse justify-content-md-center" id="mynavbar">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="https://example.com" id="mydropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">onClick Dropdown</a>
<div class="dropdown-menu" aria-labelledby="mydropdown"> <a class="dropdown-item" href="#">Something</a> <a class="dropdown-item" href="#">Another thing</a> <a class="dropdown-item" href="#">Some other things</a> </div>
</li>
</ul>
</div>
</nav>

<!--BEGIN PAGE CONTENT-->
<div class="container">
<div class="row">
<div class="col">
Page content goes here...

</div>
</div>
</div>


<!--Supporting scripts. First jQuery, then popper, then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

How to edit a rollover using a Dreamweaver function.