Like Rollover how to More than one image from navigator?

13 replies
776 views
Translate

.

This topic is closed to new replies. Start a new post to keep the conversation going.

Jon Fritz

Community Expert

In the archaic version of Dreamweaver, rollovers and other image swaps were controlled with javascript. In general, that's really not the way it's done anymore. Over the last 15 or so versions of the program, Adobe moved away from those outdated scripts and toward CSS controlled styling. The interface element you're looking for has been gone from the program for 7 or 8 versions.

You can still add the old scripts, but they need to be done individually, through the Behaviors Window from Design View using the Swap Image Behavior set onMouseOver, onMouseOut, onMouseDown and onMouseUp...

Translate

A

ady23458124ntw3Author

Participating Frequently

Please show me a video of you Adding Image in Image in Image in Image

Translate

BenPleysier

Community Expert

Copy and paste the foloowing into a new document and view the result in a browser:

<!doctype html>
<html>

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    <style>
        .nav-item.nav-link {
            background-image: url('https://i.stack.imgur.com/fnTFF.png');
            width: 120px;
            height: 50px;
            margin: 0 10px 0 0;
            display: block;
        }

        .nav-item.nav-link:hover {
            background-position: 0 100px;
        }

        .nav-item.nav-link.active {
            background-position: 0 50px;
        }
    </style>

</head>

<body id="junk">
    <header class="bg-light">
        <div class="container">
            <div class="row">
                <div class="col">
                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse text-danger text-center" id="navbar1_collapse">
                            <div class="navbar-nav">
                                <a class="nav-item nav-link active" href="#">Home</a>
                                <a class="nav-item nav-link" href="#">About</a>
                                <a class="nav-item nav-link" href="#">Contact</a>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

B

Ben M

Community Expert

That navigation you are pointing to is related to the <nav> tag for HTML5 ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav ). Simply inserting it has nothing to do with rollover effects and is strictly for code markup. Rollover effects are controlled via css :hover psuedo class ( https://developer.mozilla.org/en-US/docs/Web/CSS/:hover ).

Translate

A

ady23458124ntw3Author

Participating Frequently

But remember that in a dreamweaver 8 just like image rollover. In navigator you could add more than two images!?

Translate

B

Ben M

Community Expert

Yes. What I was saying is that your screenshot is showing you highlighting "navigation" which is only going to add the HTML5 tag <nav></nav> into your code and is not related to rollovers at all, it is to structure your code. If you are simply looking for an image rollover that option is still present in the following location (Insert --> HTML --> Rollover Image).

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.